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:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<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*-->
<title>Bootstrap Test</title>
<!-- 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]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
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 .container-fluid
(full-width).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 wellSo 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="container-fluid">
<div class="row">
<div class="col-xs-12" style="background-color: red;" >column 1</div>
</div>
</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>, and tell each one to span 6 columns (.col-xs-6
):
<div class="container-fluid">
<div class="row">
<div class="col-xs-6" style="background-color: red;">column 1</div>
<div class="col-xs-6" style="background-color: blue;">column 2</div>
</div>
</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 <div>, then to ensure that the columns become equal width when the available screen size is > 768px we need to add a second class of 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="container-fluid">
<div class="row">
<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>
</div>
</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 <div> elements (to have four total) and we’ll need a different class for each screen size applied to every <div>. Our desired layouts will be as follows:
Extra Small: Four columns, each taking up the entire screen width
To accomplish this we tell each <div> to span all 12 columns, and we’re using the col-xs-
class, so our desired class will be col-xs-12
Small: Four equal-width columns
If we have four <div> elements that should be of equal width, we’ll want them to span the 12 columns equally and so we simply append 3 to the class giving us col-sm-3
Medium: Two equal-width columns in the middle, with two smaller, equal width columns on each end
We’ll have the outer <div> elements span two columns each, with a class of 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 col-md-4
. The <div> elements will flow left to right so the classes should be applied as:
col-md-2
col-md-4
col-md-4
col-md-2
Large: Three minimum-sized columns, with one large column spanning the rest of the screen
Finally we’ll have each of the first three <div> elements span one column each, and give the remaining nine columns to the last <div>; meaning our classes are:
col-lg-1
col-lg-1
col-lg-1
col-lg-9
The source code for our grid layout should now look like this:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1" style="background-color:red;">column 1</div>
<div class="col-xs-12 col-sm-3 col-md-4 col-lg-1" style="background-color:blue;">column 2</div>
<div class="col-xs-12 col-sm-3 col-md-4 col-lg-1" style="background-color:green;">column 3</div>
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-9" style="background-color:yellow;">column 4</div>
</div>
</div>
And the browser (being resized from extra small to large) will display: