Level 4
composer require laravel/ui --dev
php artisan ui bootstrap
Did you execute this?
Source: https://laravel.com/docs/master/frontend#introduction
1 like
Jan 2, 2020
6
Level 1
how to enable Bootstrap in Laravel
My goal is to have Bootstrap css/js on my site - so i never rely on external links.
I was experimenting with new Laravel project laravel new lara and was trying to add Bootstrap following documentation.
I might have missed something cause that did'nt work as i was expecting.
- for me the only way Bootstrap was working is when i've added following code on my page:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
-
if i don't include code above on my page - Bootstrap is not working
-
was trying to install via
composer require twbs/bootstrapcomposer require twbs/bootstrap-sassnpm install bootstrapnpm install bootstrap-sasseven tried downloading precompiled files
every case i had Bootstrap's styles/scripts not working as expecting - button is been shown in ugly way without styles
<button type="button" class="btn btn-primary">Primary</button>
i do believe i'm missing something or doing something wrong. need help
Level 75
Another option download bootstrap rename to app.css. That's what I did.
Level 67
Yes, do this...
composer require laravel/ui --dev
php artisan ui bootstrap
npm run dev
...but also, make sure your webpack.mix.js is copying app.js and app.css to public/js and public/css
Reference them in your blade layout file.
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
# I suggest placing this above your closing body tag, rather than using `defer`
<script src="{{ asset('js/app.js') }}"></script>
By default your resources/js/app.js file pulls in a file called bootstrap.js (which has nothing to do with Bootstrap as in getbootstrap.com Bootstrap)... bootstrap.js is just Laravel's bootstrapping file. Inside this file, Bootstrap, jQuery, Popper are all pulled in.
In your resources/sass/app.scss file, Bootstrap styles are also pulled into your main compiled css file...
but in order for that to work, you need to compile with npm run dev ...or npm run prod if deploying to production... ...or npm run watch if you are actively working on code.
1 like
Level 75
And remember in the free video series there is a video covering all this.
Level 1
ok, i've done a fresh install
laravel new laratrap
cd laratrap
composer install
composer require laravel/ui --dev
php artisan ui bootstrap
npm install
npm run dev
this also did'nt work, but i found out that all public/css/app.css has compiled proprely (can't say about previous tries - didn't check it) so the problem now is that css file was not loaded by web page.
have tried code posted by fylzero - did'nt work.
have tried some variations (i found on internet) with {{ HTML:: ... }} and {{ URL:: ... }} - did'nt work either
finally i found a solution (close to what fylzero has posted)
I've added this on page and Bootstrap styles started working:
<link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="{{ asset('js/custom.js') }}"></script>
source of solution: https://stackoverflow.com/questions/28214499/laravel-5-not-finding-css-files
thank everyone for your replies
Level 67
@aktheon I was copy/pasting from an app and didn't realize I added secure_asset and mix in there, sorry about that. Glad you figured it out!
1 like
Please or to participate in this conversation.