Cómo instalar Bootstrap 4 en Laravel 5.5

Laravel 5.5 es la última versión LTS (Long Term Support) de este conocido framework. Con actualizaciones de seguridad hasta 2020 es una opción ideal para usarlo en tus desarrollos en PHP. Por defecto incluye Bootstrap 3, pero a continuación mostraré cómo instalar la última versión de Bootstrap 4 en Laravel 5.5.

Partimos de que ya se tiene instalado Laravel 5.5. En caso contrario, he descrito como se hace para Debian en esta entrada anterior. También es válida para Ubuntu y otras distribuciones derivadas.

1.- Instalar Node.js: En la carpeta root del proyecto instalaremos Node.js con el siguiente comando:

npm install
npm install
Instalando node.js en laravel 5.5

2.- Desinstalar Bootstrap 3. Para ello usaremos nuevamente la consola de comandos:

npm uninstall bootstrap-sass --save-dev

Con la opción save-dev además se eliminará la entrada que hace referencia a la librería en el fichero package.json.

laravel 5.5 package.json sin bootstrap 3
Fichero package.json sin Bootstrap 3

3.- Instalar dependencias: Bootstrap 4 depende de jQuery y Popper.js. La primera librería ya viene instalada, con el siguiente comando se instalará la segunda:

npm install popper.js --save-dev

4.- Instalar Bootstrap 4: Análogamente instalaremos la última versión de Bootstrap 4:

npm install bootstrap@4.* --save-dev

5.- Ejecutando una vez más npm install se instalarán todas las dependencias descritas en el fichero package.json.

Una vez instaladas las librerías hay que cambiar las referencias en el código de Laravel.

6.- En primer lugar, editamos el fichero /resources/assets/js/bootstrap.js, cambiando las referencias a bootstrap-sass por bootstrap, como muestro a continuación:

fichero bootstrap.js editado
Fichero bootstrap.js editado.

7.- Seguido, editaremos también el fichero /assets/sass/app.scss como muestro a continuación:

8.- A continuación, editaremos el apartado Typography del fichero /assets/sass/_variables.scss, Bootstrap 4 no hace uso de $icon-font-path y en vez de usar píxel como unidad hace uso de rem:

9.- Finalmente, ejecutamos npm run dev para compilar los ficheros sass, los ficheros js y los mix de Laravel. También se puede ejecutar npm run watch para ver en tiempo real los cambios con el modo observador.

Y así es cómo se desinstala Bootstrap 3 e instala Bootstrap 4 en Laravel 5.5 para distribuciones Linux basadas en Debian y Ubuntu en menos de 10 pasos.