First of all grids are 2-dimensional boxes. It’s used to create the layout of a website. Grid layout makes the task of designing much easier and cleaner. If you are new to css then i would suggest to learn create grids with simple css first. Therefore bootstrap grid will be easy to understand.
What is bootstrap grid?
Bootstrap is one of the most popular css framework. It has lots of built in components and grid is one of them. It provides a 12 column grid layout to make a responsive layout. Bootstrap 4 is out there but we will start with bootstrap 3 grids first.
So lets make things easier with a table and see how grids work.
|Features||Phones extra small (<768px)||Tablets small (≥768px)||Desktops medium (≥992px)||Desktops large (≥1200px)|
|Grid behavior||Horizontal at all times||Collapsed to start, horizontal above breakpoints|
|Container width||None (auto)||750px||970px||1170px|
|max no of columns||12||12||12||12|
So in the above table we have some basic info about the characteristics of grids. Its time to learn how to use it in our markup.
<div class="container"> <div class="row"> <div class="col-lg-* col-md-* col-sm-* col-xs-*"> <!-- content --> </div> </div> </div>
In the above code container class is the wrapper of row or rows. Inside the container we have a class row. Due to a row can contain max 12 columns so we can’t exceed it. Therefore if we do something like below it will not work as expected.
<div class="container"> <div class="row"> <div class="col-md-6"> <!-- content with width of 6 columns --> </div> <div class="col-md-7"> <!-- content with width of 7 columns.Therefore it becomes 6 + 7 = 13 --> </div> </div> </div>
The picture below will make things much cleaner.
So this is how a row with 12 columns look like. Now let’s see how it will look with our markup of a 13 columns in a row.
Finally you can see what will happen when the number of columns exceed 12. So in the above code if we want to recover this issue either we have to make it 6 + 6 or 7 + 5. So that’s all about grids. Always remember every div inside row has padding of 15px and that’s gutter width.
How to use nesting grids,offsets and column ordering?
The term nesting grids means grid(s) inside a grid. Bootstrap support nesting grids as much as possible.
<div class="container"> <div class="row"> <div class="col-md-6"> col-md-6 <div class="row"> <div class="col-md-4"> nested .col-md-4 </div> <div class="col-md-8"> nested .col-md-8 </div> </div> </div> <div class="col-md-6"> col-md-6 </div> </div> </div>
In the above code the row inside 1st col-md-6 creates a nested grid. Finally open your browser and run it.
First of all offset is a technique used to set the position of boxes(grids) inside row. We can set how much space to leave before or after a grid. So let’s check it out how offset works.
<div class="container"> <div class="row"> <div class="col-md-offset-4 col-md-6"> col-md-offset-4 + col-md-6 </div> </div> </div>
In the above code the grid inside row has left 4 cols. Because we have used the class col-md-offset-4. So now open your browser and run the program.
We have used col-md-offset-* class before the col-md-* class because we want space before it. So if you want space after a grid then add the offset class after the main grid class.
Column ordering is a way to change the orders of columns inside a row. Bootstrap provide 2 special classes for this purpose. One is push and another is pull. Its used in the same way like col-md-push-*. However i am using md(medium device) class for example you can use lg,xs or sm also.
<div class="container"> <div class="row"> <div class="col-md-8"> col-md-8 </div> <div class="col-md-4"> col-md-4 </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-push-4 col-md-8"> col-md-push-4 + col-md-8 </div> <div class="col-md-pull-8 col-md-4"> col-md-pull-8 + col-md-4 </div> </div> </div>
In the above code you can see how to use push and pull. Now save it and open in the browser window.
Finally you can see what you can do with column ordering.
Therefore we have learned how to use nested columns,column ordering and offsets. So now lets move to the final step and create a simple layout.
Bootstrap grid layout
First of all we will create a simple blog layout. So create a simple html file and a css file. If you haven’t yet downloaded bootstrap you can get it from here. Before you write code add bootstrap css and js file to the project directory. In addition to these 2 add jquery also as bootstrap js is jquery dependent. So now open your html file and the following code.
<!DOCTYPE html> <html lang="en"> <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>Bootstrap grid layout</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> </head>
Don’t forget to add these 2 meta tags before title. So now let’s move forward to our html body.
<body> <div class="container-fluid"> <div class="row"> <div class="header col-md-12"> Header </div> <div class="content col-md-12"> <div class="row"> <div class="main col-md-8"> Main content </div> <div class="sidebar col-md-4"> Sidebar </div> </div> </div> <div class="footer col-md-12"> Footer </div> </div> </div> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
You can see its just a single container and a row. Inside the row there’s a header,footer and a content holder. Furthermore the content grid is divided into sub grids i.e nested columns. Now open your style sheet and add anything you want as we don’t need any specific styles. Finally save it and open the file in your browser. I have added some styles with this markup and this is what its looks like now.
Now if you resize the browser after a certain view port it will look like below.
So that’s all now we have learned how to create responsive layouts with bootstrap grid system.
Furthermore there are much more we can do with bootstrap. Bootstrap 4 provides an way to use flexbox which is much more interesting. Stay update i will write about advance grid features and flex integration with bootstrap 4 in my next article.