Laravel 5.1 and Bootstrap 3 Sass setup

Question

I want to use Bootstrap 3 Sass with Laravel 5.1, but I had some questions:

In 5.1, in the package.json file for Laravel, out-of-the-box there is a dependency for "bootstrap-sass": "^3.0.0". Is there an easy way then to set up bootstrap sass with Laravel 5.1?
Do I need to pull in the bootstrap source or should I just link to the CDN or put the files in my public folder?
Is there any reason to use the source code of Bootstrap, instead of putting it in the public folder?
Am I correct in assuming that I would need to install bootstrap through Bower, move the fonts folder contents to the public folder, then set up Elixir to mix all the Sass files together?

I'm just a bit confused about integrating a third party front end service like Bootstrap into Laravel. I'm new to both Laravel and Bootstrap, so any information or advice would be appreciated.

Note: I've done a lot of research online, but the tutorials for Laravel and Bootstrap are dated and the comments reveal that they don't work right.

Thank you for your time.

Altrim · Accepted Answer · 2015-07-08 17:00:50Z

4

First to install the node packages just run npm install inside the folder.

After that if you navigate to resources/assets/sass/app.scss you will see the first commented line imports entire bootstrap from node modules installed through package.json

After you've uncommented the line you can see by default in gulpfile.js you already have the elixir command to compile the app sass file.

With all that setup just run gulp and elixir will compile the sass file that imports bootstrap and you will see the output in public/css/app.css which you can link in your application.

And finally to copy the fonts or any other asset you can use the copy command and you will have the fonts copied to the public folder.

elixir(function(mix) {
    mix.copy('node_modules/bootstrap-sass/assets/fonts/', 'public/fonts');
    mix.sass('app.scss'); 
}

edited Jul 8, 2015 at 17:00

answered Jul 8, 2015 at 16:51

Altrim

6,7764 gold badges35 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Caleb Jacobo Over a year ago

Thanks so much Altrim, I appreciate your time!

Curvian Vynes Over a year ago

And what about the other source files and scripts like bootstrap.js. Do I mix it in directly from the gulpfile.js? Like so: ../../../node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js?

shaneparsons Over a year ago

how does linkage to the fonts work? i.e. how does bootstrap know the fonts are in public/fonts?

Altrim Over a year ago

@Shane If you look at bootstrap source you can see by default bootstrap includes the fonts from ../fonts/. In this case basically the dir structure is the same as the default you get when downloading bootstrap. In this case the css is in pubilc/css/ folder and we copy the fonts to public/fonts/.

Altrim Over a year ago

@CurvianVynes I guess you can do that but I usually first copy mix.copy() the js files to /resources/assets/js/ and then I mix them from there.

Collectives™ on Stack Overflow

Laravel 5.1 and Bootstrap 3 Sass setup

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related