Is there an up to date alternative for using Bootstrap and Jetstream together?

Level 58

As of now, Jetstream, which is a scaffolding package for Laravel, primarily supports Tailwind CSS out of the box. If you want to integrate Bootstrap with Laravel Jetstream, you might need to manually replace Tailwind CSS with Bootstrap. Here’s a step-by-step guide on how you can do this:

Step 1: Install Laravel Jetstream

First, ensure you have Laravel and Jetstream installed. You can install Jetstream with either Livewire or Inertia.js. Here’s how you can install it with Livewire:

composer require laravel/jetstream
php artisan jetstream:install livewire
npm install && npm run dev
php artisan migrate

Step 2: Remove Tailwind CSS

Remove Tailwind CSS from your project, as it's the default:

npm uninstall tailwindcss postcss autoprefixer

Then, remove any Tailwind imports from your CSS files, typically found in resources/css/app.css.

Step 3: Install Bootstrap

Install Bootstrap via npm:

npm install bootstrap

Step 4: Include Bootstrap in Your Project

Import Bootstrap into your project. You can do this by adding the following line to your resources/css/app.css or create a new SCSS file if you prefer using SCSS:

@import '~bootstrap/dist/css/bootstrap.min.css';

Alternatively, for SCSS:

@import '~bootstrap/scss/bootstrap';

Then, update your webpack.mix.js to compile the new CSS:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

Step 5: Adjust Your Views

You will need to update your Blade templates to use Bootstrap classes instead of Tailwind. This involves changing class names in the HTML structure of your Jetstream views, which can be found in resources/views.

Step 6: Compile Assets

Run the following command to compile your assets:

npm run dev

Step 7: Test Your Application

Make sure to test your application thoroughly to ensure that all styles and scripts are loading correctly and that the UI looks as expected.

Conclusion

This manual approach allows you to integrate Bootstrap into Laravel Jetstream, but it requires adjusting CSS classes in Blade views and might involve some additional tweaking to get everything looking just right. As of now, there isn't a direct, maintained package like JetStrap for newer versions of Laravel and Jetstream, so manual integration is the way to go.