Bootstrap Masterclass – Part 1

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible.

Part 1 of this article will only concentrate on getting familiar with the way the Bootstrap CSS works. Part 2 will deal with using what we have learnt to build a simple web page.

We will be concentrating on the responsive aspect of Bootstrap only and not going into the intricacies of button styling etc. which can be easily found on the Bootstrap website.

I am also assuming you have a relatively good grasp of HTML and CSS.

If you are starting out with Bootstrap and have downloaded the package you are probably wondering what do I do now? After all there isn't really an instruction manual and the website can be a little daunting without some basic knowledge of what you are supposed to be doing.

Let's begin with "What is Bootstrap?"
Bootstrap 3 is a mobile first CSS framework - and that is all it is (excepting the jQuery goodies which are not really what Bootstrap is about). When we say a CSS framework what we are talking about is the base CSS you will need to create a responsive website.

At the core of the CSS framework is a responsive 12 column grid. I will explain more about this later. It is the most popular CSS framework being used on the web today and is constantly evolving to be the best framework you can use.

That is not to say it is the best. Some people slate it for trying to be a one for all solution and adding additional bloat to your websites CSS – but I will give you a very good tip at the end of the Part 2 of this article that will reduce the Bootstrap CSS down to it’s bare minimum for your website.

If you are only interested in a bare bones CSS frame work then there are other frameworks which only concentrate on the responsive side of the CSS and leave all the fancy stuff up to you to write.

Why mobile first?
The idea behind this is that if you start with designing a mobile version of your website (which usually means a lot less elements) it is easier to then build up your design for larger screens.

But if you start from a larger screen and try to develop the site to work on smaller screens it is supposedly harder to remove elements that don't fit the screen; in reality I have never found this to be the case.

So don't be put off by this statement if you are trying to redesign your current unresponsive site to a responsive site.

There are two types of responsive layout in Bootstrap:

Fluid - the template will be 100% width of the browser
Fixed - the container will snap to 4 defined widths based on the following screen sizes.

Bootstrap uses four media queries to detect the viewport width and assign the correct CSS attributes.

To keep things simple, the naming conventions for each are xs (extra small), sm (small), md (medium) and lg (large).

And here is the nitty gritty of when these media queries kick in, but this not something you really need to think about.

xs - for resolutions less than 768px wide, the container has a 100% width with a maximum width of 750px (the default Bootstrap size)
sm - for resolutions of 768px and wider – the container is fixed at 750px wide
md - for resolutions of 992px and wider – the container is fixed at 970px wide
lg - for resolutions of 1200px and wider – the container is fixed at 1170px wide

We will be using the fixed layout for this article. This layout has a 15px padding on the left and right whereas the fluid layout has no padding.

To help you visualize the examples in this article download the Experts-Exchange.zip and extract the contents to your local drive – when you see Load Exercise x then load the relevant exercise file in your browser.

Container Class

A Bootstrap website begins with using a div (or a span) with a class of container - if you are already into web design this will be a fairly common practise for you already. You can have multiple containers on a page, but never nest them.
Load Exercise 1

So this markup is correct and could be used for a header, main content and footer layout:

<div class="container"></div>
                      <div class="container"></div>
                      <div class="container"></div>

Open in new window

These markup examples are not correct because they would add additional unwanted padding to your template:

<div class="container">
                                      <div class="container"></div>
                                      <div class="container"></div>
                      </div>
                       
                      <div class="container">
                                      <div class="container">
                                                      <div class="container"></div>
                                      </div>
                      </div>

Open in new window

So our container class looks like this:

If you were using the fluid layout then you would not have any left/right padding. Resize your browser with Exercise 1 loaded and see how the container never touches the sides but snaps to the different widths.

Tip 1
All your visible content should be placed inside the appropriate container.

Row Class

Load Exercise 2

When using Bootstrap think of rows of related content - related content could mean your header is one row, your main content is another row (or multiple rows) and your footer is another row.

You can have rows within rows if it makes it easier for you to layout your content. This would be especially true for your main content area where you will have many differing areas of content.

The markup for a row is like this:

<div class="container">
                      	<div class="row"></div>
                      	<div class="row"></div>
                      </div>

Open in new window

The row class has a negative 15px left and right margin so the row actually breaks out of the containers padding - don't be confused, this will work itself out later.

Tip 2
Never use a row outside a container – you will end up with your content off screen and horizontal scrollbars.

And this is how our row class looks inside the container class:

Column Class

Load Exercise 3

Bootstrap is built on the popular 12 column grid system - they use 12 because it is divisible by 2,3,4,6 and 12 making it easier to layout your content however you wish. The 12 columns are divided equally along the whole width of the row – so each column is 1/12^th of the width of the row.

A column class looks like this:

<div class="col-xx-n"></div>

Open in new window

col – this is just a shorthand name for column
xx – this is the browser width name– xs, sm, md, lg
n – this is the number of columns to occupy

Heres an example of the 12 column layout divided up as 4 columns / 3 columns / 2 columns / 3 columns.

<div class="row">
                                      <div class="col-xs-4"></div>
                                      <div class="col-xs-3"></div>
                                      <div class="col-xs-2"></div>
                                      <div class="col-xs-3"></div>
                      </div>

Open in new window

Example below:

And here’s an example using muliple column classes

<div class="row">
                                      <div class="col-xs-4 col-md-6"></div>
                                      <div class="col-xs-3 col-md-2"></div>
                                      <div class="col-xs-2 col-md-2"></div>
                                      <div class="col-xs-3 col-md-2"></div>
                      </div>

Open in new window

A column class can occupy anything from 1 column up to 12 columns. As you can see in the example above we have multiple columns in the same row but the total must equal 12 or less.

If you have more than 12 columns then any column that makes the total more than 12 will be wrapped to the next new line.

You will notice we are using col-xs-4 etc – xs is one of the browser width classes that we will discuss next.

What’s important to know here is how you can layout out any number of columns of content.

Load Exercise 4

Maybe we only need 3 columns of content then our markup might be something like this:

<div class="row">
                                      <div class="col-xs-3"></div>
                                      <div class="col-xs-6"></div>
                                      <div class="col-xs-3"></div>
                      </div>

Open in new window

Example below:

This markup gives us a very nice layout if you had a left and right sidebar and the middle main content.

Load Exercise 5

But each row class can contain multiple rows of columns, look at this example:

<div class="row">
                                      <div class="col-xs-3"></div>
                                      <div class="col-xs-6"></div>
                                      <div class="col-xs-3"></div>
                                      <div class="col-xs-2"></div>
                                      <div class="col-xs-7"></div>
                                      <div class="col-xs-3"></div>
                      </div>

Open in new window

Example below:

We have 6 columns here, because the first 3 add up to 12 columns we know the last 3 (which also total 12) will be on the next line.

Load Exercise 6

We could have used a row here to seperate the two sets of columns like this:

<div class="row">
                                      <div class="col-md-3"></div>
                                      <div class="col-md-6"></div>
                                      <div class="col-md-3"></div>
                      </div>
                      <div class="row">
                                      <div class="col-md-2"></div>
                                      <div class="col-md-7"></div>
                                      <div class="col-md-4"></div>
                      </div>

Open in new window

But since our blocks of columns always equal 12 we don’t need to add the extra markup for the row. Remember that by using 12 columns it will take up the full width of the container. If you use say 8 columns then it will take up 8/12 of the container.

And this is how the full design looks:

Because Bootstrap builds its framework like this (container padding and row negative margin) we do not have to worry about targetting the leftmost column’s left padding and the rightmost column’s right padding to remove the extra padding that would exist if the container and row were not styled as they are.
It doesn’t matter how many columns we have in a row this will be always the case.

Tip 3
Columns can go inside columns but if you want to eliminate the extra padding put the nested columns in a row class.

Browser Width Classes

Using the browser width class names as part of the column class name means we can dictate the column sizes on the various devices. On a mobile the div might be 12 columns but on a medium sized browser it may only occupy 6 columns.

Load Exercise 7

Let’s look at one of our previous markup examples, this time adding in a few more of these classes:

<div class="row">
                                      <div class="col-lg-2 col-md-3 col-sm-6 col-xs-6">Col 1</div>
                                      <div class="col-lg-4 col-md-6 col-sm-5 col-xs-6">Col 2</div>
                                      <div class="col-lg-6 col-md-3 col-sm-1 col-xs-12">Col 3</div>
                      </div>

Open in new window

Resize your browser with Exercise 7 loaded to see how the columns resize and move.

Now we are saying:

On large screens div #1 will occupy 2 columns, div #1 will occupy 4 columns and div #1 will occupy 6 columns.

On medium screens div #1 will occupy 3 columns, div #2 will occupy 6 columns and div #3 will occupy 3 columns.

On small screens div #1 will occupy 5 columns, div #2 will occupy 5 columns and div #3 will occupy 2 columns.

On x-small screens div #1 will occupy 6 columns, div #2 will occupy 6 columns and div #3 will occupy 12 columns (new row).

The sm and md column classes are inherited up the browser size classes, by this I mean if you set col-sm-6 and you want the div to occupy 6 columns at the md and lg sizes then you do not need to set them as well.

Look at this example

<div class="col-sm-6 col-xs-12"></div>

Open in new window

On xs browsers the div will occupy 12 columns (100%) on sm, md and lg device it will occupy 6 columns

Now You See Me, Now You Don’t

A common requirement in responive templates is the ability to hide and show certain content at different browser widths.

So I am going to introduce you to two new classes (xx is replaced by the browser width class name)

hidden-xx
visible-xx

Now say for example I only wanted something to show on md width browsers then I would add to that elements class visible-md – this means the element will only be visible on browsers with a width equal to or greater than 992px and less than 1200px.

The element would not show on xs, sm or lg browser widths.

We can also do the reverse and say it is hidden on md devices using hidden-md.

Here’s the markup for the two examples:

<div class="visible-md"></div>
                      <div class="hidden-md"></div>

Open in new window

These classes will really come into play when you need to hide elements on mobile devices – a good example might be a slideshow.

Load Exercise 8 and resize your browser to see how we hide and show columns at different browser sizes.

You should now have a fairly good understanding of how to make a Bootstrap template and be ready for Part 2.

With thanks to Scott (padas) and Rob (tagit) for their help in compiling this Article.

Bootstrap Masterclass – Part 1

Container Class

Row Class

Column Class

Browser Width Classes

Now You See Me, Now You Don’t

Comments (0)