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.
6 comentarios
Inicia sesión para comentar
Comentarios:
-
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 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 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 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 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 hace 6 meses
Excelente aclaración y guía, además que es sencillo.