Comparte en Facebook Twitter Google+

bootstrap-en-laravel-5-1

Si eres una de esas personas que se ha acostumbrado a usar Bootstrap como framework de diseño en tus proyectos y no estás muy conforme con que haya sido retirado de la versión 5.1 de laravel, no te preocupes, hoy te enseñaré como integrarlo de nuevo con ayuda del componente Laravel Collective.

Instalar Laravel Collective

Para instalar el paquete via Composer, agregamos en composer.json la siguiente línea a la instrucción require:

Luego ejecutamos:

Luego desde el archivo config/app.php agregamos el ServiceProvider al array de providers

No olvides agregar también los alias:

Agregando Bootstrap

Desde la pagina oficial del framework, descargamos los archivos necesarios:

http://getbootstrap.com/getting-started/#download

Puedes descargar la primera opción (Bootstrap), que sólo incluye los archivos necesarios de CSS, JS y las fuentes.

la carpeta js, css y fonts deben incluirse dentro de nuestra aplicación, un lugar ideal para ello es crear un directorio assets/ dentro de public/

public-assets

Creando un nuevo layout

Vamos a crear una nueva plantilla base que se pueda extender desde las otras vistas de nuestro proyecto, sera está la que incluya los archivos CSS y JS, para continuar un poco con la convención de Laravel 5.0 podemos llamar a esta plantilla app.blade.php (también puedes llamarla layout.blade.php o como quieras).

En este caso se hace uso del facade Html para incluir los archivos de Bootstrap en la plantilla

Ahora que contamos con nuestra plantilla base, podemos proceder a crear una vista para el home de la aplicación, llamada home.blade.php

Si le diste un nombre diferente a “app” tu layout, haz el cambio en la primera línea: @extends(‘nombre_del_layout_aqui’)

Configuración del controlador y las rutas

Lo ideal , es trabajar con un controlador encargado del comportamiento del home, lo creamos usando artisan con:

Luego vamos a editar el archivo generado en app/Http/Controllers/HomeController.php, y agregamos una función index que devuelva la vista creada.

Por supuesto, no podemos olvidarnos de agregar la ruta para acceder a dicho controlador en el archivo app/Http/routes.php

Finalmente si ingresas a  ruta_de_tu_proyecto/home podrás ver algo como esto:

bootstrap-home

Como puedes ver, es un proceso realmente sencillo que puedes realizar en tan solo unos pocos minutos, para tener a tu disposición nuevamente el framework Bootstrap en tus nuevos proyectos de Laravel 5.1

Espero que te haya gustado esta publicación, no olvides compartir en redes sociales y dejar tus comentarios y sugerencias.

Lecturas recomendadas

Regístrate hoy en Styde y continua mejorando tus habilidades: ver planes.

Lección anterior Primeros pasos con Laravel 5.1 Lección siguiente Inyección de servicios en Blade con Laravel 5.1