Call Us: 866.PICK.ITS or Have Us Contact You:
So you’re looking to create a mobile-friendly, responsive website and have decided on Bootstrap as your framework? Good move. Bootstrap is one of the simplest ways to have built-in, responsive design right out of the box. We are going to run through the steps to get a barebones Bootstrap page up and running in about 10 minutes.
Let’s open our index page in a browser to see how it looks on its own:
You can copy the full contents of the index.html file below:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--The above 3 meta tags *must* come first in the head; any other content must come *after*-->
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries-->
<!--WARNING: Respond.js doesn't work if you view the page via file://-->
<!--[if lt IE 9]>
<!-- Include all compiled plugins (below), or include individual files as needed -->
It’s not much, but you can see that the font has changed; that’s because we included, and are now using, the default Bootstrap CSS files.
Bootstrap’s responsive design is best harnessed by making use of the built in grid layout. There are a few points to consider when setting up your grid:
.container(a fixed-width element) or
.col-xs-(extra small, screen < 768px)
.col-small-(small, screen >= 768px)
.col-md-(medium, screen >= 992px)
.col-lg-(large, screen >= 1200px)
.col-sm-will be applied to not only all small screen widths, but medium and large as well
So to recap, a grid layout is built as follows: container > row > columns. For a closer look at column classes let’s check out an example.
As we saw before, there are 12 available columns; but these can be divvied up and spanned in any combination that adds up to 12 (any combination over 12 will result in overflow kicking down to a new row). So if you want a single column that spans the whole screen on all devices, the code would be:
<div class="col-xs-12" style="background-color: red;" >column 1</div>
We only need to use the col-xs- class because it will flow upwards and be applied to all larger screen sizes. Let’s check it out in the browser, I’ve added a background color so that we can better see the column boundaries in a browser.
Now, if we wanted two equally sized columns on all devices we would add a second
<div class="col-xs-6" style="background-color: red;">column 1</div>
<div class="col-xs-6" style="background-color: blue;">column 2</div>
Now what if we wanted two equally sized columns for all devices other than the smallest screen width, but we want the columns to use the full screen width when displayed on a phone? We can keep our current layout and just have to slightly tweak the classes to ensure this behavior. To take care of the full width columns we will use the
col-xs-12 class on each
col-sm-6. Remember, the column classes flow upwards, so that class declaration will take care of the small screen resolution AND everything above it.
<div class="col-xs-12 col-sm-6" style="background-color: red;">column 1</div>
<div class="col-xs-12 col-sm-6" style="background-color: blue;">column 2</div>
If you refresh your browser you’ll see that the grid layout at full width remains the same; however, if you shrink the browser down you’ll notice that the columns stack on top of each other once the resolution gets smaller than 768px.
For one more example of how to use the column classes, let’s see how we would implement the grid system if we wanted a different layout for every screen resolution/device size. For this example we’ll add two more
Extra Small: Four columns, each taking up the entire screen width
To accomplish this we tell each
col-xs-class, so our desired class will be
Small: Four equal-width columns
If we have four
Medium: Two equal-width columns in the middle, with two smaller, equal width columns on each end
We’ll have the outer
col-md-2; meaning we have 8 (12-[2*2]) columns left to divide up amongst the inner columns, so each one gets a class of
Large: Three minimum-sized columns, with one large column spanning the rest of the screen
Finally we’ll have each of the first three
The source code for our grid layout should now look like this:
<div class="container-fluid"><br /> <div class="row"><br /> <div class="col-xs-12 col-sm-3 col-md-2 col-lg-1" style="background-color:red;">column 1</div><br /> <div class="col-xs-12 col-sm-3 col-md-4 col-lg-1" style="background-color:blue;">column 2</div><br /> <div class="col-xs-12 col-sm-3 col-md-4 col-lg-1" style="background-color:green;">column 3</div><br /> <div class="col-xs-12 col-sm-3 col-md-2 col-lg-9" style="background-color:yellow;">column 4</div><br /> </div><br /> </div>
And the browser (being resized from extra small to large) will display: