How to setup Bootstrap
If you’ve started working with HTML, you’ve probably used CSS before, this allows you to style whatever HTML you’re working on to your hearts content.
Custom CSS can take a while however, especially if you have to plug in line after line of code just to specify what size you want your columns to be, luckily for all of us, there are a few frameworks we can choose from to save us hours of time, bootstrap is one of the most well known of these frameworks.
With Bootstrap, you are given the ability of using features like the grid system that they have developed, this will allow you to create great looking websites from day 1, and here ill show you how to set up this great, flexible framework.
First, lets open up our text editor, and make sure that it is specifying HTML code
From here, we have two choices, we can either choose to use the minified version of bootstrap, or we can download bootstrap and use the CSS file it contains.
Lets start with the minified version, click the ” getting started ” button on the navbar on bootstraps homepage, from here, scroll down slightly
With the link pasted below our title in thetag, it will now link with the CDN, and allow bootstraps CSS to be used within your HTML folder
From here we can easily test if bootstrap is working, as bootstrap adds many pre-fabricated classes that we can use right away to see its effect, one of these is the “jumbotron” class.
Using bootstrap, we have to put everything within a div with the class=”container”, this is to allow bootstraps spacing and margins to take effect, so lets go ahead and throw this together in a text editor
Now without bootstrap, we would have something pretty uninspiring, however even with just a few lines of code we are able to have something that looks solid
Here we can see that we have bootstrap engaged due to the fact that the jumbotron is centered, and half the space of the screen as opposed to the whole screen, from here, you can use any of bootstraps features that are presented on their website at
Now to use the bootstrap folder option
The bootstrap folder will have a few files after you extract it, for the purposes of CSS, you can easily put the bootstrap.css file in the folder your HTML is in, and you can easily link the stylesheet without too much hastle, otherwise you can link it to a seperate folder.
After you have bootstrap enabled, you are free to take advantage of the great systems that bootstrap provides, such as the grid system, which will allow you to decide the size of individual things on your webpage responsively, and easily.
I hope this has helped, and enjoy using bootstrap