Learn the Bootstrap Grid in 15 Minutes
Bootstrap is the most widely used frontend framework right now. When it comes to building responsive websites and apps, it’s the first choice of both professionals and hobbyists because of how simple it is to work with. Anybody who knows HTML, CSS and a bit of JavaScript can learn Bootstrap in no time.
In this quick lesson we’re going to cover the grid system, one of the fundamental concepts every Bootstrap developer needs to master. It allows us to create responsive page layouts which can change and adapt depending on the screen size of the device the user is on.
1. Rows and Columns
The grid consists of rows and columns. This allows us to freely position elements vertically and horizontally.
Rows are block level. This means, that when we create a row, it takes up the entire width of the element it is in. You can think of rows as new lines in your layout.
The horizontal alignment in the grid is done via columns. Only columns can be the direct children of a row and all content should go inside them. Placing content directly within a row will break the layout.
<!-- Wrong -->
<div class="row">
Some content
</div>
<!-- Correct -->
<div class="row">
<div class="col-md-12">Content Goes Here</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Learn the bootstrap grid in 15 minutes</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body{ padding-top:50px;}
.row div{
background-color: #2196F3;
border: 1px solid #fff;
height: 125px;
padding: 15px;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">First row, first column</div>
<div class="col-md-6">First row, second column</div>
</div>
<div class="row">
<div class="col-md-4">Second row, first column</div>
<div class="col-md-4">Second row, second column</div>
<div class="col-md-4">Second row, third column</div>
</div>
</div>
</body>
</html>
Note: Rows and columns have a special relationship. Columns have 15px left and right padding so that their content is properly spaced out. However, this pushes the first and last column’s content 15px away from the parent. To compensate, the row has negative left and right 15px margins. This is why you should always place columns within rows.
2. Rows are Divided in 12
Rows are divided horizontally into 12 equal parts. When we place a column inside a row, we have to specify the number of parts it is going to take up.
This is done by applying a specific class .col-md-NUMBER, where NUMBER can be an integer from 1 to 12. Depending on the number, a column will occupy a percentage of the full row width: 6 will be 50% (12/6), 3 will be 25% (12/3) and so on. The following example should make things clearer:
<div class="row">
<div class="col-md-12">Full width</div>
</div>
<div class="row">
<div class="col-md-3">25%</div>
<div class="col-md-3">25%</div>
<div class="col-md-6">50%</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Learn the bootstrap grid in 15 minutes</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body{ padding-top:50px;}
.row div{
background-color: #2196F3;
border: 1px solid #fff;
height: 125px;
padding: 15px;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">Full width</div>
</div>
<div class="row">
<div class="col-md-3">25%</div>
<div class="col-md-3">25%</div>
<div class="col-md-6">50%</div>
</div>
</div>
</body>
</html>
3. Column Wrapping
We always have to take into consideration, that there are only 12 available spaces in a line. If we sum up the space required by a couple of adjacent columns, and the result exceeds 12, the last columns in that group will have to move to the next line. Let’s take a look at a practical example:
The first two columns have sizes of respectively 8 and 4 (8+4=12), which makes the first line full. There isn’t enough space for the third cell there, so it will have to wrap to the next line.
<div class="row">
<div class="col-xs-8"></div>
<div class="col-xs-4"></div>
<div class="col-xs-9">This column will move to the next line.</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Learn the bootstrap grid in 15 minutes</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body{ padding-top:50px;}
.row div{
background-color: #2196F3;
border: 1px solid #fff;
height: 125px;
padding: 15px;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-8"> 8 </div>
<div class="col-xs-4"> 4 </div>
<div class="col-xs-9"> 9 </div>
</div>
</div>
</body>
</html>
4. Screen Size Classes
Remember when we wrote .col-md-NUMBER in step 2? That -md- stands for medium. Bootstrap has a number of these classes for different screen sizes:
- xs – Extra small screens like smartphones. Use it as
.col-xs-NUMBER - sm – Small screen devices like tablets.
.col-sm-NUMBER - md – Medium sized screens such as low dpi desktops and laptops.
.col-md-NUMBER - lg – Large, high resolution screens.
.col-lg-NUMBER
Bootstrap takes the screen resolution and dpi into account when deciding which classes are active (learn more here). This is a powerful way how to control how layouts render on different devices.
When we define a rule for any device size, this rule will be inherited and applied to all bigger sizes, unless we overwrite it by supplying a new one. Hit the Run button on the following example and try resizing your browser to see the layout adapt.
<div class="row">
<div class="col-xs-12 col-md-6"><p>Try resizing the browser to see this text and the image rearrange for optimal viewing. </p></div>
<div class="col-xs-12 col-md-6"><img src="city.jpg" class="img-responsive"></div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Learn the bootstrap grid in 15 minutes</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body{ padding-top:50px;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6">
<p>Try resizing the browser to see this text and the image rearrange for optimal viewing.</p>
<p> On extra small screens both the text and the image take up the whole width of the row. </p>
<p> When the browser size gets into the medium category, they can move in together and share a single row. They only need half of the row, since there is more space horizontally on the screen.</p>
</div>
<div class="col-xs-12 col-md-6"><img src="http://cdn.tutorialzine.com/wp-content/uploads/2015/10/city.jpg" class="img-responsive"></div>
</div>
</div>
</body>
</html>
5. Clearfix
In some scenarios, when a column has much more content and a bigger height then the ones after it, the layout will break. The columns will all pile up under each other, instead of moving to the next line as they should.
To prevent this, we add a helper div with the clearfix class. It will force all columns after it move to a new line, solving the issue.
<div class="row">
<div class="col-xs-6 tall-column">A column much taller than the rest.</div>
<div class="col-xs-6"></div>
<div class="clearfix"></div>
<div class="col-xs-6"></div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Learn the bootstrap grid in 15 minutes</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body{ padding-top:50px;}
.row{
margin-bottom: 50px;
}
.row .col-xs-6{
background-color: #2196F3;
border: 1px solid #fff;
height: 125px;
padding: 15px;
color: #fff;
}
.row .tall-column{
height: 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 tall-column">All columns are 6 units wide, but this one is too tall!</div>
<div class="col-xs-6"></div>
<div class="col-xs-6">This column shoudln't be here.</div>
<div class="col-xs-6">This column shoudln't be here.</div>
</div>
<div class="row">
<div class="col-xs-6 tall-column">By adding a clearfix between the second and third columns, everything will go where it should.</div>
<div class="col-xs-6"></div>
<div class="clearfix"></div>
<div class="col-xs-6">All better now.</div>
<div class="col-xs-6"></div>
</div>
</div>
</body>
</html>
You can use Bootstrap’s responsive utility classes to control when clearfix is active.
6. Offsets Are Your Friend
By default, columns stick to each other without leaving any space, floating to the left. Any excess space remaining in that row stays empty on the right.
To create margins on the left of columns we can use the offset classes. Applying a .col-md-offset-2 class to any column will move it to the right, as if there is an invisible .col-md-2 cell there. You can have different offsets for the different screen sizes thanks to the xs, sm, md and lg prefixes.
You can use offsets to easily center columns:
<div class="row">
<div class="col-md-6 col-md-offset-3"></div>
<div class="col-md-10 col-md-offset-1"></div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-5 col-xs-offset-4">col-xs-5 col-xs-offset-4</div>
<div class="col-xs-9 col-xs-offset-2">col-xs-9 col-xs-offset-2</div>
<div class="col-xs-6 col-xs-offset-1">col-xs-6 col-xs-offset-1</div>
<div class="col-xs-4 col-xs-offset-1">col-xs-4 col-xs-offset-1</div>
<div class="col-xs-11 col-xs-offset-1">col-xs-11 col-xs-offset-1</div>
<div class="col-xs-10">col-xs-10</div>
<div class="col-xs-7">col-xs-7</div>
</div>
<div class="row">
<div class="col-xs-5">col-xs-5</div>
</div>
<div class="row">
<div class="col-xs-7">col-xs-7</div>
<div class="col-xs-10">col-xs-10</div>
<div class="col-xs-11 col-xs-offset-1">col-xs-11 col-xs-offset-1</div>
<div class="col-xs-11 col-xs-offset-1">col-xs-11 col-xs-offset-1</div>
<div class="col-xs-9 col-xs-offset-2">col-xs-9 col-xs-offset-2</div>
<div class="col-xs-5 col-xs-offset-4">col-xs-5 col-xs-offset-4</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Learn the bootstrap grid in 15 minutes</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body{ padding-top:50px;}
.row{
padding: 0 250px;
}
.row div{
background-color: #2196F3;
height: 50px;
padding: 15px;
color: #fff;
}
@media(max-width: 992px){
.row{
padding: 0 100px;
}
.row div{
height: 25px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-5 col-xs-offset-4">col-xs-5 col-xs-offset-4</div>
<div class="col-xs-9 col-xs-offset-2">col-xs-9 col-xs-offset-2</div>
<div class="col-xs-6 col-xs-offset-1">col-xs-6 col-xs-offset-1</div>
<div class="col-xs-4 col-xs-offset-1">col-xs-4 col-xs-offset-1</div>
<div class="col-xs-11 col-xs-offset-1">col-xs-11 col-xs-offset-1</div>
<div class="col-xs-10">col-xs-10</div>
<div class="col-xs-7">col-xs-7</div>
</div>
<div class="row">
<div class="col-xs-5">col-xs-5</div>
</div>
<div class="row">
<div class="col-xs-7">col-xs-7</div>
<div class="col-xs-10">col-xs-10</div>
<div class="col-xs-11 col-xs-offset-1">col-xs-11 col-xs-offset-1</div>
<div class="col-xs-11 col-xs-offset-1">col-xs-11 col-xs-offset-1</div>
<div class="col-xs-9 col-xs-offset-2">col-xs-9 col-xs-offset-2</div>
<div class="col-xs-5 col-xs-offset-4">col-xs-5 col-xs-offset-4</div>
</div>
</div>
</body>
</html>
7. Push and Pull
The push and pull classes allow us to reorder columns depending on screen size. Push moves a column to the right, and pull to the left. This is different from offset as push and pull use position: relative and don’t shift other columns.
Push and pull classes have the following format: .col-SIZE-push-NUMBER, and .col-SIZE-pull-NUMBER. Possible SIZE values are sm, xs, md and lg. This represents in which of the 4 screen size scenarios we want the swap to occur. NUMBER tells Bootstrap how many positions we want to move.
Hit Run on the code below and resize the pop-out to see how the two cells change places when the window becomes small.
<div class="row">
<div class="col-xs-4 col-md-push-8">On laptop and desktop screens this text will go to the right and the image will go to the left, changing places.</div>
<div class="col-xs-8 col-md-pull-4"><img src="city.jpg" class="img-responsive"></div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Learn the bootstrap grid in 15 minutes</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body{ padding-top:50px;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4 col-md-push-8">On laptop and desktop screens this text will go to the right and the image will go to the left, changing places.</div>
<div class="col-xs-8 col-md-pull-4"><img src="http://cdn.tutorialzine.com/wp-content/uploads/2015/10/city.jpg" class="img-responsive"></div>
</div>
</div>
</body>
</html>
Conclusion
Great job! You now know the most important part of the Bootstrap framework, and you’re ready to build your next stellar responsive design. But there is a bit more left to learn to achieve true mastery. Check out Bootstrap’s extensive documentation for more.