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
(medium) and lg
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.
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:
These markup examples are not correct because they would add additional unwanted padding to your template:
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.
All your visible content should be placed inside the appropriate container.
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:
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.
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
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/12th
of the width of the row.
A column class looks like this:
- 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.
And here’s an example using muliple column classes
<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>
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:
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:
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:
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
were not styled as they are.
It doesn’t matter how many columns we have in a row this will be always the case.
Columns can go inside columns but if you want to eliminate the extra padding put the nested columns in a row
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="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>
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).
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
sizes then you do not need to set them as well.
Look at this example
<div class="col-sm-6 col-xs-12"></div>
browsers the div will occupy 12 columns (100%) on sm
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)
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
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:
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.