How to Setup Laravel Jetstream with Bootstrap? – A Complete Guide

This guide explores the integration of Laravel Jetstream, a powerful application starter kit, with Bootstrap, a widely-used front-end framework, to streamline the development of modern web applications.

Building modern web apps requires solid authentication and a good-looking UI. Laravel Jetstream offers a robust starting point, simplifying features like user authentication, API support, and team management. When paired with Bootstrap, Jetstream not only saves development time but also ensures a polished, responsive design.

This guide will walk you through integrating Jetstream with Bootstrap, enabling you to create feature-rich, well-styled, and secure Laravel applications with ease.

What is Laravel Jetstream?

Laravel Jetstream is a beautifully designed application starter kit introduced with Laravel 8. It includes the following features:

• Authentication: Login, registration, and password reset functionality.
• Email Verification: Ensures users verify their email after registration.
• Two-Factor Authentication: Adds an additional layer of security.
• Session Management: Lets users view and log out of active sessions.
• API Support: Includes Laravel Sanctum for API authentication.
• Profile Management: Users can update their profile info and photos.
• Teams (Optional): Allows team support when needed.

By default, Jetstream uses Tailwind CSS and supports either Livewire (Blade) or Inertia.js (Vue/React).

Why Bootstrap Instead of Tailwind?

While Tailwind CSS is modern and utility-first, many developers still prefer Bootstrap because of:

• Familiarity: Many developers are already familiar with it.
• Pre-styled Components: Elements like navbars, modals, and forms come pre-styled.
• Legacy Projects: Teams maintaining older projects often stick with Bootstrap.
• Quick Prototyping: Bootstrap’s grid and utilities simplify layout design.

Getting Started: Master Using Laravel Jetstream with Bootstrap

Laravel Jetstream is a powerful application starter kit that provides authentication, two-factor login, profile management, API support via Laravel Sanctum, and more. By default, Jetstream is built on Tailwind CSS — a modern utility-first CSS framework.

However, if you’re a developer who prefers Bootstrap, you can still enjoy Jetstream’s features and combine it with the Bootstrap framework. In this guide, we’ll walk you through setting up Laravel Jetstream with Bootstrap step-by-step.

Pros:

• Familiar and widely used framework
• Pre-built, ready-to-use UI components
• Easier migration for Bootstrap-based teams

Cons:

• Extra setup to replace Tailwind with Bootstrap
• Loses the optimized Tailwind design
• Requires manual customization

Prerequisites

Before you start, make sure you have the following installed:

• PHP >= 8.0
• Composer
• Node.js and npm

Installing Laravel with Jetstream

1. Install a New Laravel Project:

composer create-project laravel/laravel jetstream-bootstrap
cd jetstream-bootstrap

2. Install Jetstream:

composer require laravel/jetstream

3. Scaffold Jetstream (Choose Livewire or Inertia):

For Livewire (Blade-based UI):

php artisan jetstream:install livewire

For Inertia (Vue/React-based UI):

php artisan jetstream:install inertia

Customizing Jetstream with Bootstrap

Since Jetstream supports Tailwind CSS out of the box, you need to replace it with Bootstrap manually. Follow these steps:

1. Remove Tailwind CSS:

npm uninstall tailwindcss @tailwindcss/forms @tailwindcss/typography autoprefixer postcss

2. Install Bootstrap:

npm install bootstrap

3. Include Bootstrap in Your Project:

For CSS: Replace your resources/css/app.css:

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

For SCSS: Create an SCSS file and include Bootstrap:

@import '~bootstrap/scss/bootstrap';

4. Configure JS:

In resources/js/app.js:

import './bootstrap';

5. Configure Laravel Mix/Vite:

For Vite (vite.config.js):

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/css/app.css', 'resources/js/app.js'],
      refresh: true,
    }),
  ],
});

For Mix (webpack.mix.js):

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

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

6. Remove tailwind.config.js , postcss.config.js files.

7. Recompile your assets:

npm run build

Customizing Views and Components

Each of files that are mentioned below may require modifications to ensure they reflect your customized UI based on Bootstrap. For instance, the authentication views (e.g., login, register) can be updated to use Bootstrap’s card component, as shown in the previous example.

Replace Tailwind Classes with Bootstrap Classes

After removing Tailwind CSS and installing Bootstrap, you will need to replace all Tailwind classes with their Bootstrap equivalents. Here’s a comparison of common Tailwind classes and their Bootstrap counterparts:

1. Form Inputs

• Tailwind CSS

<input class="border-gray-300 rounded-md shadow-sm" />

• Bootstrap:

<input class="form-control" />

Customizing Views

Jetstream’s views are located in the resources/views directory. You can modify authentication pages, components, and layouts to integrate Bootstrap styles.

For example, to modify the login page, you can use Bootstrap’s card component:

<x-guest-layout>
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header text-center d-flex align-items-center justify-content-center gap-2">
                        <x-authentication-card-logo />
                        <h4 class="m-0">Login</h4>
                    </div>
                    <div class="card-body">
                        <!-- Validation Errors -->
                        <x-validation-errors class="mb-4" />

                        @session('status')
                            <div class="mb-4 font-medium text-sm text-green-600">
                                {{ session('status') }}
                            </div>
                        @endsession

                        <form method="POST" action="{{ route('login') }}">
                            @csrf

                            <!-- Email -->
                            <div class="mb-3">
                                <label for="email" class="form-label">Email</label>
                                <input id="email" type="email" name="email" class="form-control" required
                                    autofocus autocomplete="username" value="{{ old('email') }}">
                            </div>

                            <!-- Password -->
                            <div class="mb-3">
                                <label for="password" class="form-label">Password</label>
                                <input id="password" type="password" name="password" class="form-control" required
                                    autocomplete="current-password">
                            </div>

                            <!-- Remember Me -->
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <div class="mb-0 form-check">
                                    <input class="form-check-input" type="checkbox" name="remember" id="remember_me"
                                        {{ old('remember') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="remember_me">Remember Me</label>
                                </div>

                                <!-- Forgot Password -->
                                @if (Route::has('password.request'))
                                    <a class="text-muted" href="{{ route('password.request') }}">
                                        Forgot Password?
                                    </a>
                                @endif
                            </div>

                            <!-- Submit Button -->
                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary">
                                    Log in
                                </button>
                            </div>
                        </form>

                        <!-- Register Link -->
                        <p class="text-center mt-3">
                            <span>New on our platform?</span>
                            <a href="{{ route('register') }}">
                                <span>Create an account</span>
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-guest-layout>

Files That Need Modification

When integrating Bootstrap with Laravel Jetstream, you’ll need to customize several key files across various sections such as authentication, components, API, profile, and layouts. Here’s a list of the primary files to modify:

Authentication Files

• resources/views/auth/confirm-password.blade.php
• resources/views/auth/forgot-password.blade.php
• resources/views/auth/login.blade.php
• resources/views/auth/register.blade.php
• resources/views/auth/reset-password.blade.php
• resources/views/auth/two-factor-challenge.blade.php
• resources/views/auth/verify-email.blade.php

Components Files

• resources/views/components/action-message.blade.php
• resources/views/components/action-section.blade.php
• resources/views/components/application-logo.blade.php
• resources/views/components/application-mark.blade.php
• resources/views/components/authentication-card-logo.blade.php
• resources/views/components/authentication-card.blade.php
• resources/views/components/banner.blade.php
• resources/views/components/button.blade.php
• resources/views/components/checkbox.blade.php
• resources/views/components/confirmation-modal.blade.php
• resources/views/components/confirmation-modal.blade.php
• resources/views/components/dialog-modal.blade.php
• resources/views/components/dropdown-link.blade.php
• resources/views/components/dropdown.blade.php
• resources/views/components/form-section.blade.php
• resources/views/components/input-error.blade.php
• resources/views/components/input.blade.php
• resources/views/components/label.blade.php
• resources/views/components/modal.blade.php
• resources/views/components/nav-link.blade.php
• resources/views/components/responsive-nav-link.blade.php
• resources/views/components/secondary-button.blade.php
• resources/views/components/section-border.blade.php
• resources/views/components/section-title.blade.php
• resources/views/components/switchable-team.blade.php
• resources/views/components/validation-errors.blade.php

Profile Files

• resources/views/profile/delete-user-form.blade.php
• resources/views/profile/logout-other-browser-sessions-form.blade.php
• resources/views/profile/show.blade.php
• resources/views/profile/two-factor-authentication-form.blade.php
• resources/views/profile/update-password-form.blade.php
• resources/views/profile/update-profile-information-form.blade.php

Policy and Terms Files

• resources/views/policy.blade.php
• resources/views/terms.blade.php

Better Option

If you prefer not to follow all the steps and want a ready-to-use solution, you can utilize the Sneat Laravel Admin template.

This Admin template includes pre-built dashboards, apps, pages, components, and more. Additionally, it provides an updated and properly designed UI with Jetstream, which can be easily integrated into your project.

Features:

• Based on Bootstrap 5
• Laravel 12
• Vite 5
• Integrated CRUD App
• Vertical & Horizontal layouts
• Default, Bordered & Semi-dark themes
• Light & Dark mode support
• Jetstream and ACL Ready
• Localization & RTL Ready & much more..!!

For detailed guidance on how to use it, you can refer to the comprehensive documentation available for Laravel Jetstream Auth.

The primary benefit of using this template is that the Tailwind CSS dependency has been removed, and the Livewire scaffolding has been customized to align with the template’s structure, making integration and development smoother. It is also available in bootstrap template version.

Conclusion:

With Laravel Jetstream and Bootstrap, developers can focus more on unique application features rather than reinventing authentication systems or UI elements. Start building today, and streamline your development process with this powerful combination.

Integrating Laravel Jetstream with Bootstrap is a practical approach to building Laravel applications when you prefer Bootstrap’s ready-to-use components over Tailwind CSS. While it requires some manual setup, the combination offers a secure, feature-rich backend with a polished, responsive frontend.

By following this guide, you can integrate Jetstream with Bootstrap and have a functional Laravel application ready for customization and development.