Level 122
the auth boilerplate already includes bootstrap?
Jun 11, 2017
22
Level 4
how to integrate bootstrap with Laravel
hi, I need integrate bootstrap with My Laravel app. I do not use bootstrap theme only css and js files. currently using cdn via internet. I need exit cdn and download bootstrap files and paste it in public folder and connect with Laravel app. I have used auth command to create login form. so, I need to change app.blade.php file according to this matter also. give me better solutions.
Level 4
@Snapey yes but it is loded via internet. I need direct install bootstrap files to My app.
Level 88
Have you looked into npm?
1 like
Level 122
No, its not pulled in from a CDN by default, it is included in app.css
In the master layout (by default app.blade.php), remove your CDN lines
if you are not interested in compiling your own assets
download the bootstrap package and
- copy bootstrap.min.css into your public/css folder
- copy bootstrap.min.js into your public/js folder
Add the following to the head area of app.blade.php
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
Before the closing </body> in app.blade.php
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
You will probably need to do the same with jQuery if you need it without coming from CDN
5 likes
Level 4
@Snapey Thanks, it is working you comment what I need correctly and @bobbybouwmann and @Snapey I would like to know what is npm?
Level 122
npm is a package manager like composer, typically for css and js libraries
2 likes
Level 4
@Snapey here is some problem encountered you know that with laravel auth command here is logging form. then user can logging with username and user can see logout popup when click username. but in My case I couldn't see logot popup when comment this lines
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
currently I am using this one
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
how can I solve this?
2 likes
Level 122
You need to have jQuery loaded also.
I wrote;
You will probably need to do the same with jQuery if you need it without coming from CDN
put the jQuery line back and see if your popup works again.
1 like
Level 4
@Snapey Yes it is working with jQuery line
Level 4
If this is regarding integrating your bootstrap library with Laravel blade template the detailed guide is given here https://www.5balloons.info/integrating-bootstrap-4-layout-to-laravel-project/
Level 1
@Snapey in my case bootstrap isn't working i h followed the same procedure as mentioned above,,,, as the css and js files are in public folder and app.blade.php is in resources/views/layouts/app.blade.php so i changed the path:
<link href="{{ asset('../public/css/bootstrap.min.css') }}" rel="stylesheet">
but still same error
Level 1
@HAXORDEVELOPER - try this and make sure that you have the bootstrap.min.css file on public/css folder
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
Level 8
@SNAPEY - But isn't the devDependency package named "bootstrap" is already in Laravel's default package.json file? I mean, what does this actually mean, because I can't find any bootstrap css or scss files! So what's the point of "requiring" packages through Composer - if we have to use NPM anyways; or don't we?^_^'
-Sorry, I'm overwhelmed obviously with too many questions...
Level 122
If you look in package.json in the root folder, you can see where bootstrap-sass is being pulled in. Its files are stored in the npm-dependencies/bootstrap-sass folder.
This gets compiled into app.css in your public/css/app.css file.
Out of the box, Laravel ships with a public/css/app.css file already compiled for you so you don't need to run npm to rebuild the assets. But if you do, its all setup to include bootstrap
1 like
Level 8
@SNAPEY - Thank you. This is interesting... So the project folder has to have a [ node_modules ] folder according to the "scripts" but it doesn't... And since I'm using Laragon, I think I have to run the command [ Composer run-script ] manually in the project's directory using the terminal, correct?! Maybe it didn't do it by itself, right?!^_^'
Level 122
@sky7ure If you want to rebuild front-end assets, then you need to install npm and run npm install and npm run dev from the root of your project
If you only want to USE the assets that are already built then they are there ready to be used in the public folder.
I have loads of projects that don't have 10's of thousands of files in the node-modules folder!
Not sure what Laragon really has to do with it - but then again I've never used it.
1 like
Level 8
@SNAPEY - Thank you kindly, I think I got the important notion here, just like you mentioned... The assets like SCSS or JS Bootstrap files may not exist in the project, but they're built directly into the app.css and app.js files.
And never mind about Laragon, Sir, it's doing its job as a Windows local PHP server properly; I was just a bit confused about everything, that's all!^_^
Level 1
but in laravel version 6.9 the app.scss is empty and there's no app.css
Level 73
@williamz6 there is a documentation for this:
You are replying to a post which is 2 years old already. We move forward :) just follow the docs.
1 like
Please or to participate in this conversation.