'How to install bootstrap in laravel 8

All of the info I can find online says that you should install bootstrap by running composer require laravel/ui and then php artisan ui boostrap. However, in Laravel 8, laravel/ui is deprecated. Is there a new/better way of installing bootstrap?

csslaraveltwitter-bootstraplaravel-8


Solution 1:[1]

You can install bootstrap manually and compile sass.

First, add it to npm with compilers:

npm install bootstrap
npm install sass
npm install sass-loader

Second, create (if not created) resources/sass/app.scss and add this:

@import '~bootstrap';

Third, add compilation in webpack.mix.js:

mix.sass('resources/sass/app.scss', 'public/css')

Than, compile it with npm run dev - you see compiled file public/css/app.css

Now you can use it in templates with asset:

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

Solution 2:[2]

The way I do it is similar to what you mention, even in Laravel 8. So I believe you are on the right path.

You can create a new Laravel project using this comand

composer create-project laravel/laravel --prefer-dist laravel-bootstrap

after, in laravel folder run

composer require laravel/ui

If you just want to add bootstrap to an existing project, just run:

php artisan ui bootstrap
npm install
npm run dev

And if you need Auth

php artisan ui bootstrap --auth

Solution 3:[3]

Solution 1: Install bootstrap manually

1). Download bootstrap's source files from bootstrap website: https://getbootstrap.com/docs/5.1/getting-started/download/

See this screenshot to download enter image description here

2). Rename downloaded bootstrap folder and add it into the Public folder enter image description here

3). Load Bootstrap files in your file/view

enter image description here

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="{{asset('bootstrap/css/bootstrap.min.css')}}" rel="stylesheet">
       
    <!-- Bootstrap Bundle with Popper -->
    <script src="{{asset('bootstrap/js/bootstrap.bundle.min.js')}}"></script>

    <title>Hello, world!</title>
    <button class="btn btn-primary">Bootstrap btn</button>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Solution 2: Install bootstrap with package manager

Create Laravel Project

composer create-project laravel/laravel --prefer-dist laravel-bootstrap

Select Project Folder

cd laravel-bootstrap

Install Bootstrap in Laravel

php artisan ui bootstrap

Install Bootstrap Packages

npm -v

Finally, install the bootstrap package and the related frontend dependencies such as jquery

npm install

Compile Assets

For SCSS: Open resources/sass folder app.scss file and add the following lines

@import 'variables';
@import '~bootstrap/scss/bootstrap';

For CSS: Open resources/css folder app.css file and add the following lines

@import 'variables';
@import '~bootstrap/css/bootstrap';

Run the below command for asset compilation

for development: npm run dev
for production: npm run production

Automate SASS or CSS and JS Changes

If you are lazy and don’t want to run the npm run dev command every time you make changes in SASS/CSS and JS file, you should use the following command.

npm run watch

After compile see this status in terminal

enter image description here

Finally, load css and js files in your blade template

    <!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{ config('app.name', 'Laravel') }}</title>
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <h1>Tutorial made by Positronx.io</h1>
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jeffrey Nicholson Carré
Solution 2 Cleverson Franco
Solution 3

Related Questions