CODEWITHSUNDEEP
laravel
waithira
waithira

Reputation: 340

Not loading bootstrap in Laravel 8

I have just started using Laravel 8, so how do I include bootstrap in Laravel 8 since my pages are not loading bootstrap?

In this case it does not load the list group with the proper styling.

@extends('layouts. app')

@section('content')
    <h1>{{ $title ?? '' }}</h1>
    
    <ul class="list-group">
       <li class="list-group-item">Web design</li>
       <li class="list-group-item">programming</li>
       <li class="list-group-item">SEO</li>
    </ul>
@endsection

Upvotes: 1

Views: 24741

Answers (6)

waithira
waithira

Reputation: 340

I ran

composer require laravel/ui

then

php artisan ui bootstrap

then

npm install and npm run dev

Upvotes: 0

Wassim Al Ahmad
Wassim Al Ahmad

Reputation: 1094

the easiest way

remove white space from here @extends('layouts. app') to @extends('layouts.app')

then put this line in resource\view\layouts\app.blade.php

<script src="{{asset('bootstrap/js/bootstrap.bundle.min.js')}}"></script>

and put this file in public folder directly bootstrap

Upvotes: 3

abdelwahed ahmed
abdelwahed ahmed

Reputation: 1

i worked with the older way when you build the website from scratch and that works, i used bootstrap.min.css, bootstrap.min.js and jquery file in public folder of laravel and linked this files to index.blade.php

<script src="{{ asset('js/jqueryv3_9_0.js') }}" defer></script>
<script src="{{ asset('js/bootstrap.mini.js') }}" defer></script>
<link href="{{ asset('css/bootstrap.mini.css') }}" rel="stylesheet">

Upvotes: -1

Mhammed Talhaouy
Mhammed Talhaouy

Reputation: 1269

if you want install bootstrap in laravel 8 install

composer require laravel/ui

then install bootstrap with auth or not

php artisan ui bootstrap (--auth)

after that you need to write

npm install && npm run dev

same steps like laravel 7

all the best

Upvotes: 4

Menno van Hout
Menno van Hout

Reputation: 42

Laravel 8 is dropping bootstrap and implementing tailwind CSS.

I recommend learning and using tailwind css.

This can be easily installed with:

npm install

npm install -D tailwindcss

npx tailwindcss init

Laravel Tailwind CSS docs

Tailwind CSS

Upvotes: 0

Alejandro De Castro
Alejandro De Castro

Reputation: 2257

For install Bootstrap 4 in Laravel 8 then install following Laravel UI composer package to get command:

composer require laravel/ui

After successfully install above package then we are ready to install Bootstrap.

Exists 2 way to do that, one is a simple Bootstrap setup install and another is install Bootstrap with auth.

Install Bootstrap 4:

php artisan ui bootstrap

Install Bootstrap 4 with auth

php artisan ui bootstrap --auth

Now you can see your resource directory JS folder.

You also need to install npm and run it:

npm install

and then, run NPM

npm run dev

Now you can work with your Bootstrap 4 app.

You can use it including these lines on the header of your Blade templates:

<head>
   <script src="{{ asset('js/app.js') }}" defer></script>
   <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

Regards

Upvotes: 7

Related Questions