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

Bootstraps homepage

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

Bootstraps minified code

In this section, we have three lines of code, most importantly are the lines for minified CSS and Javascript, we’ll go with the CSS for now.

With the link pasted below our title in the tag, 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.

using the download option

We can get the same results using the folder or the minified CSS

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.

From the Bootstrap Component page

I hope this has helped, and enjoy using bootstrap

Online courses and the approach they take to teaching<< >>Kotlin is officially here, what is it?

Has one comment to “How to setup Bootstrap”

You can leave a reply or Trackback this post.
  1. test1 - October 25, 2017 Reply

    this was a really quality post. In theory Iג€™d like to write like this also ג€“ taking time and real effort to make a good article. Really what I needed. Thanks I have been looking for this sort of info for a long time.

Leave a Reply

Your email address will not be published.