Table of Contents
Media queries, row, columns and offsets were discussed and we can check them out. The last two things that remained untouched are pulling and pushing. These classes included in Bootstrap can help you create interesting layouts across various devices. So, in this third part of the tutorial focused on Bootstrap 3 grid system we are going to discuss and practice its ability to pull and push content across the page. Without further ado, let’s begin!
Pull & push
When you are working on a layout that have to adapt to still changing resolution, one thing you might want to do is to restructure the whole content as the size of the screen decreases or increases. This is exactly situation where col--pull- and col--push- class become very handy. Using them appropriately you can make the magic happen on your website.
To make it easier to understand how pull and push classes works let’s note that they use left (push) and right (pull) CSS properties with percentage values. So, when you push some element via col--push- class, you are just using various values for left CSS property. The same thing with col--pull-, but with right CSS property. Stop talking and let’s start practicing instead.First, we need to create some playground for trying out how these classes works and what they can do for us …
For today, we will get rid of paragraphs and switch into something more visually appealing. The HTML will include footer and header tags wrapped inside “col-lg-12” divs nested inside “row” divs. Between those two we will add one more div with class “row” containing another two divs for two columns. First div will have class “col-md-5” and “col-md-push-7”. Second div will habe class “col-md-7” and “col-md-pull-5”. Both of these columns will contain one div – one with class “first” and one with class “second”. We want these divs on one line on large screen (7 + 5 = 12). Finally, all the code will wrapped inside div with class “container”.
HTML:
<div class=”container”> <div class=”row”> <div class=”col-lg-12”> <header></header> </div> </div> <div class=”row”> <div class=”col-md-5 col-md-push-7”> <div class=”first”></div> </div> <div class=”col-md-7 col-md-pull-5”> <div class=”second”></div> </div> </div> <div class=”row”> <div class=”col-lg-12”> <footer></footer> </div> </div> </div>
Great, HTML is set, but we can hardly distinguish between individual elements. What’s more, since they don’t even have any height, they are invisible and also untouchable. So we have to add some CSS. First, let’s set the font-size for body element (we are going to work with ems). The value will be 16px. Next will be header. Its height will be 4em and background tomato. Divs with class “first” and “second” will both have height of 10em. However, the background of the “first” will be #f5deb3 while #e9967a for the “second”. The footer will have height of 2em and background set to #d2691e.
CSS:
body {font-size: 16px;}
header {
height: 4em;
background: tomato;
}
.first,
.second {height: 10em;}
.first {background: #f5deb3;}
.second {background: #e9967a;}
footer {
height: 2em;
background: #d2691e;
}
Now, we can see how the layout will change on different resolutions. With this etting we created a layout of two columns. What’s interesting is that the div with class “first” as displayed as the second column on medium screen (>768px) while the div with class “second” is displayed as the first one. When screen is smaller than 768px, both columns will take whole width and they will be displayed in order that suit their classes (“first” will be first and “second” will be second).
This effect is achieved solely by push and pull classes. The first div is moved to the left by 58.33333333% from the left side of the screen while the second is moved to the right by 41.66666667% from the right edge. This causes “switching” their position in the layout.
Let’s now try another example with four columns. These columns will contain two divs (one per column) with class “third” and “fourth”. Third div will have background set to #3498db and fourth to #9b59b6. Columns classes will now be col-md-3 (12 / 4 columns = 3). First and third column will be pushed from its position to the left for space of 3 columns (col-md-push-3). Second and fourth will be pulled to the right for space of 3 columns (col-md-pull-3). So, on the medium and large screen, the div with class “first” will be second column, “second” will be first column, “third” will be fourth (last) column and “fourth” div will be third column. On smaller screen they will be full-width and vertically stacked in order following their classes.
HTML:
<div class=”container”> <div class=”row”> <div class=”col-lg-12”> <header></header> </div> </div> <div class=”row”> <div class=”col-md-3 col-md-push-3”> <div class=”first”></div> </div> <div class=”col-md-3 col-md-pull-3”> <div class=”second”></div> </div> <div class=”col-md-3 col-md-push-3”> <div class=”third”></div> </div> <div class=”col-md-3 col-md-pull-3”> <div class=”fourth”></div> </div> </div> <div class=”row”> <div class=”col-lg-12”> <footer></footer> </div> </div> </div>
CSS:
.first,
.second,
.third,
.fourth {height: 10em;}
.first {background: #F5DEB3;}
.second {background: #E9967A;}
.third {background: #3498db;}
.fourth {background: #9b59b6;}
It can look strange and confusing in the first moment, but when you practice pull and push classes on couple more examples and try to experiment on broader type of challenges, you will understand it. Just remember that when you push or pull something, it is always relative to the default position where it would be rendered without these classes. Anyway, if you find this last part somewhat confusing or you will have troubles with understanding anything, please let me now through comments or a message.
Summary
Now, you are fully equipped to work with Bootstrap 3 grid system and you can create anything you want. I hope that this multi-part tutorial will be useful for you and your career or business in the future.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
