Reputation: 340
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
Reputation: 340
I ran
composer require laravel/ui
then
php artisan ui bootstrap
then
npm install and npm run dev
Upvotes: 0
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
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
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
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
Upvotes: 0
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