29. Como utilizar Bootstrap con Laravel Jetstream

En este capítulo de Laravel, te enseñaremos cómo utilizar Jetstrap, un paquete de terceros que te permite integrar Bootstrap con Laravel Jetstream de manera rápida y sencilla. Jetstrap es una herramienta de diseño web que te permite crear rápidamente vistas y plantillas con Bootstrap, y su integración con Laravel Jetstream es fácil de configurar y personalizar.

 

Aprenderás cómo instalar y configurar Jetstrap en tu proyecto Laravel Jetstream y cómo utilizar sus características y componentes para diseñar vistas atractivas y responsivas. También cubriremos cómo personalizar y ajustar los estilos y la apariencia de tus vistas utilizando Jetstrap y Bootstrap. Al final de este capítulo, tendrás todos los conocimientos necesarios para utilizar Jetstrap y Bootstrap con Laravel Jetstream y crear una aplicación web atractiva y fácil de usar en poco tiempo.

Tema anterior Siguiente tema

6 comentarios

Inicia sesión para comentar

Iniciar sesión

Comentarios:

  • Juan F

    Juan F hace 1 semana

    compañeros, estuve haciendo pruebas con laravel 9 y jetstrap, me marcaba errores, y no me instalaba boostrap. Descubrí que el error estaba en el node.js , desinstale la versión de Node.Js completa de mi pc e instale la versión Node.Js 17.XXX y con eso me ejecuto el comando sin problemas.  les dejo el link de la versión de node.js

    https://nodejs.org/download/release/v17.9.1

    Espero les sea de utilidad, no lo he probado con laravel 10, pero con laravel 9  y este software de Node.Js funciona sin problemas. 

    Saludos

  • Jacob Figueroa

    Jacob Figueroa hace 2 meses

    Hola, primero que todo gracias por compartir su conocimiento profe. En segundo, estoy siguiendo este curso pero me quede estancado en este video. He modificado el package.json eliminando vite y que ejecute laravel-mix pero al momento de compilar el css me da error:
     

    ERROR in ./resources/sass/app.scss
    Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
    ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
    TypeError: Cannot read property 'config' of undefined

  • Walter

    Walter hace 4 meses

    📌 Bootstrap 5

    Creamos un nuevo proyecto Laravel con Jetstream:

    laravel new bootstrap --jet

    Elegimos la opción [0] livewire y [no] para el uso de teams, para terminar la instalación.

     

    Creamos una base de datos llamada bootstrap y corremos las migraciones.

    php artisan migrate

    Iniciamos el servidor

    php artisan serve

    Abrimos el proyecto en 127.0.0.1:8000

     

    Para usar bootstrap en nuestro proyecto instalamos jetstrap:

    composer require nascent-africa/jetstrap --dev

    Luego

    php artisan jetstrap:swap livewire
npm install
npm run dev

    En la carpeta public/css encontramos el archivo app.css donde están todos los estilos de bootstrap.

     

    📌 Aclaración: jetstrap trabaja con Laravel Mix, y en las últimas versiones de Laravel, viene instalado Vite por defecto. Si queremos usar Jetstrap con Laravel 9, primero debemos migrar de Vite a Mix, y recién hacer la instalación del paquete.

     

  • Juan Ramos

    Juan Ramos hace 5 meses

    Victor vale la pena mencionar que Jetstrap unicamente funciona con Laravel 8 y por el momento no hay compatibilidad de Jetstrap con Laravel 9.

    He esta seguimiento el curso y me parece muy bueno, pero afectara esto el seguimiento del resto del curso? Existe alguna otra forma de usar Bootstrap con Jetstream o es preferible trabajar con Laravel 8?

  • Willy Londoño

    Willy Londoño hace 5 meses

    No se que realizó mal, pero sigo los pasos al pie de la letra, no me sale errores al ejecutar los comandos, aún así no veo en ningún lado el archivo app.css y las vistas me aparecen sin estilos.

     

  • Jonathan Rojas

    Jonathan Rojas hace 6 meses

    Excelente aclaración y guía, además que es sencillo.