How to Easily Install Auth UI Bootstrap in Laravel

How to install auth UI bootstrap in laravel? I am newbie in web development.

I want to create login page using auth UI bootstrap. I installed auth UI bootstrap successfully. Now I want to integrate it into my project.

I tried to follow some tutorials but they didn’t worked for me. Can anyone please tell me how to install auth UI bootstrap in laravel?

So, today we are going answer all above question on how to easily install Auth UI bootstrap in Laravel application.

But before you start if you have the intention of getting a hosting provider for your website. This is the best hoster for you that we have recommended.

Steps on Install Auth UI Bootstrap in Laravel

• Step 1: Installing Laravel Application
• Step 2: Database Configuration
• Step 3: Installing Laravel UI
• Step 4: Installing Bootstrap in Laravel
• Step 5: Installing Bootstrap Auth Scaffolding
• Step 6: Installing Bootstrap Packages
• Step 7: Bootstrap Compile Assets
• Step 8: Testing

Step 1: Installing Laravel Application

Firstly, we are going to install a laravel application by running the following command in terminal.

composer create-project laravel/laravel laravel-bootstrap

Step 2: Database Configuration

Now we need to configure our laravel database. Create a new database in phpmyadmin and enter the database details into .env file as show below.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel-bootstrap
DB_USERNAME=root
DB_PASSWORD=

Run the migration,

php artisan migrate

Step 3: Installing Laravel UI

Next step, we are installing Laravel UI. Laravel UI is an official library that offers selective or predefined UI components. The laravel/ui package comes with the login and registration scaffolding for React, Vue, jQuery, and Bootstrap layouts. Run the command to install Laravel/UI.

Run the following command to install Laravel UI

composer require laravel/ui

Step 4: Installing Bootstrap in Laravel

After installing Laravel UI we are going to install Bootstrap in Laravel. To install latest bootstrap in laravel run the following command in terminal.

php artisan ui bootstrap

Step 5: Installing Bootstrap Auth Scaffolding

And if you want to have bootstrap with Auth Scaffolding run the following command.

php artisan ui bootstrap --auth

We have successfully installed the bootstrap, and you can make sure by going to resource/js/bootstrap.js. You will see that popper.js and jQuery have been added to the bootstrap’s JavaScript file.

Step 6: Installing Bootstrap Packages

Before heading to next step, we make sure to have Node installed on our local development system. Check if Node is installed with the following command in terminal.

# for node
node -v
# for npm
npm -v

Then run the following command to install bootstrap package and the related frontend dependencies.

npm install

Step 7: Bootstrap Compile Assets

Next we are going to compile bootstrap assets, as we can see, resources/sass folder _variables.scss and app.scss files have added along with sass variables and fonts.

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';

Configure vite.config.js file.

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

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

Step 8: Testing

Now everything has been done! , we will start Laravel’s local development server using the Laravel’s Artisan CLI serve command:

php artisan serve

we also need to start Vite by running the following command in new terminal.

npm run dev

Now you can open the following url in any web browser.

http://127.0.0.1:8000/

Conclusion

This concludes our tutorial on How to Easily Install Auth UI Bootstrap in Laravel. We hope you found it helpful. If you did, please share this article with your friends or family and leave us a comment to let us know what you think and stay tuned for more tutorials. If you like the tutorial please subscribe our youtube channel and follow us on social network facebook and instagram.