Our community of experts have been thoroughly vetted for their expertise and industry experience. Experts with Gold status have received one of our highest-level Expert Awards, which recognize experts for their valuable contributions.
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:
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 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/12th of the width of the row.
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:
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:
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.
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.
Our community of experts have been thoroughly vetted for their expertise and industry experience. Experts with Gold status have received one of our highest-level Expert Awards, which recognize experts for their valuable contributions.
Comments (0)