Importing bootstrap into a repo?

1

Hi all

I’m currently adding bootstrap to my repo. Should I place it in a separate bootstrap folder, or disperse the files it comes with in my current css and js folders?

2

You should place it inside css and js folders depending on the file extension, just to be organized.

2 Likes
3

Thank you! I’m worried that bootstrap will over right my styles and main file. Will it do that?

Also, is there any way I can quickly add all the files I imported into the header on all my HTML docs, so I can use them?

4

I’d put it in a folder inside the css folder, to separate it from my own css file.

As an alternative, you can use something like BootstrapCDN so you don’t have to add Bootstrap’s css in your repo.

1 Like
5

Okay, cool. Thanks for that!

I’m a fan of keeping everything locally. Is there a way I can quickly add references to the new files?

6

Can you explain further? I don’t quite get it.

1 Like
7

I want o start using he new files. Do I have to toe a link in the header out for every single one, or is there a quick way I can add a link to all of them in all of my files?

8

I think you can do it if you used a templating engine (i.e., you can just write one partial file that contains stuff for the <head>, etc. then use it for all your pages). I’m thinking of EJS, but I’m not sure if you can use it for a front-end project

1 Like
9

If you are over riding bootstrap styles, you just need to pay attention to the order that your css pages are loaded. For example if you wrote in your own css document:

.btn {
font-size: 30px;
}

Then there would be 2 instances of the .btn class (yourfilename.css and bootstrap.css) and whichever sheet was referenced last would be used. So just put your own sheet last in the header (or wherever you reference it) and you should be fine.

1 Like
10

You can use Bower to manage your front end dependencies. Use npm to install Bower. Then do bower init to set up a bower.json file - this will be an index of all your front end dependencies, such as jquery, bootstrap etc. You can also create a .bowerrc file, which should contain an object: { “directory”: “public/lib”} showing where you want your dependencies installed.

Then, you can do (for example) bower install jquery --save which will download the jquery library into your chosen directory and save a reference to it in your bower.json file. This is handy because when you save the project to Git, you don’t need to include all your libraries. You can always do a bower install and it will download the libraries automatically.

If you want to automatically inject the libraries into your index.html, it’s a bit more difficult. There are a couple of Gulp packages - wiredep and gulp-inject - designed for this, but writing the Gulp tasks is non-trivial. For small projects, it is probably not worth it - unless you are keen to learn Gulp.

1 Like