Table of Contents
Whether or not you will use Boostrap 3 as a framework for your projects and work, it is always good to play with what is currently available and hot on the market. This will help you understand how other people in the industry work and learn from them. Another thing is that you will see how others structure their code and what practices they use. Anyway, as long as you will be interested in learning, it will benefit you. Without further ado, let’s dive in!
Media queries
Whole grid (and the framework) is based on four media queries. Since Bootstrap uses mobile-first approach, the default one is for width of less than 768px. Second media query is 768 and up. Third is for width of 992px and up and the last one for screens larger than 1200px. Sure, you can easily override this behavior by changing the default values or creating additional stylesheet and including it after the Bootstrap.
In addition to media queries, Bootstrap includes special classes for columns. These classes always start with col- prefix that is followed by two letters signaling how the column should behave on different screen width. These letters are xs (extra small screen – <768px), sm (small screen >= 768px), md (medium screen >= 992px) and lg (large screen >= 1200px). All of these classes are controlled by media queries. Now let’s move to more specific parts of the grid.
Container, rows & columns
The easiest way to understand how Bootstrap’s grid system works is to imagine a simple page in magazine. Whole page is divided into individual rows which contains the content. This content is either split into columns or spreads across the whole page. Bootstrap works in the same way. First, you have to use either container or container-fluid class to on the main container. This container will contain all the content on the page (it will wrap it up). The differences between those two classes is in their width. Container uses fixed width along with media queries while container-fluid will spread across whole width of the page.
HTML:
<article class=”container”></artcile>
After creating the main container, next thing is to create individual rows. One row will contain all the content that should be placed on one row. So, if you have on h1 heading and three paragraphs and all these elements should take up whole width, you will need to create four rows for each element.
HTML:
< article class=”container”> <div class=”row”></div> <div class=”row”></div> <div class=”row”></div> <div class=”row”></div> </article>
Before you populate the rows with text, you also have to create columns. The whole grid offers as to split the content into up to twelve columns. As mentioned above, we have four types of columns – xs, sm, md and lg. So, in order to use specific column with desired width we have to use col prefix followed by letters for screen and ended up with number (from 1 to 12). So, to use half of the page on the large screen we would use col-lg-6 class. To use 1/3 col-lg-4 and so on.
Since we want to spread the content across full width on all screens, we are going to use col-xs-12 class. This will ensure that the column will be full-width on all resolutions. We want to apply the same strategy on the whole content, so let’s nest div with this class in every row and then insert the content into it.
HTML:
<article class=”container”> <div class=”row”> <div class=”col-xs-12”> <h1>Heading of the post</h1> </div> </div> <div class=”row”> <div class=”col-xs-12”> <p>Pro no nusquam volutpat, sonet causae platonem sea et, vim ea elit justo. Qui an quot fugit noster. Ea sea affert aeterno, no sed atqui quando nemore, scaevola deserunt vel ad. Quo atqui regione ex, alii labore ornatus no duo.</p> </div> </div> <div class=”row”> <div class=”col-xs-12”> <p>Brute graecis legendos per ei, ea malorum persius his. Eam iudico accumsan ei. In vim debet feugiat vivendum. Audire consulatu eu per. Cum ea nostrud euripidis sententiae, eum legimus admodum qualisque id, sit in tation admodum recusabo.</p> </div> </div> <div class=”row”> <div class=”col-xs-12”> <p>In nibh doctus est, docendi iudicabit sea ad. At nam inani accumsan vivendum. In usu putant legimus. Tibique conclusionemque ex vel, pri quot meliore partiendo te. Eu duo populo doctus instructior, soleat labores dissentiunt ad sea. Falli consequat per no, eros dictas mei cu.</p> </div> </div> </article>
Simple and easy, right? For some of you (I was in that group) the markup might look a bit messy. To ensure yourself that you are following the best practices, just remember that the only child of element with class row should be some element with class col-. That’s it. Follow this rule – .row > .col- – and you are safe from most mistakes.
However, we don’t have to stop here. We are not restricted to use just one class (column type) on the element. If we want the element to look different on various screens (widths), we can just add another class for that. Let’s say we want to change the width of text on larger screens to half and center it. To do this, we are going to add col-lg-6 (half of the page (12 columns)) and col-lg-offset-3 (to move it 3 columns) class. Remember, lg class will affect only screens 1200px and more.
HTML:
<article class=”container”> <div class=”row”> <div class=”col-xs-12 col-lg-6 col-lg-offset-3”> <h1>Heading of the post</h1> </div> </div> <div class=”row”> <div class=”col-xs-12 col-lg-6 col-lg-offset-3”> <p>Pro no nusquam volutpat, sonet causae platonem sea et, vim ea elit justo. Qui an quot fugit noster. Ea sea affert aeterno, no sed atqui quando nemore, scaevola deserunt vel ad. Quo atqui regione ex, alii labore ornatus no duo.</p> </div> </div> <div class=”row”> <div class=”col-xs-12 col-lg-6 col-lg-offset-3”> <p>Brute graecis legendos per ei, ea malorum persius his. Eam iudico accumsan ei. In vim debet feugiat vivendum. Audire consulatu eu per. Cum ea nostrud euripidis sententiae, eum legimus admodum qualisque id, sit in tation admodum recusabo.</p> </div> </div> <div class=”row”> <div class=”col-xs-12 col-lg-6 col-lg-offset-3”> <p>In nibh doctus est, docendi iudicabit sea ad. At nam inani accumsan vivendum. In usu putant legimus. Tibique conclusionemque ex vel, pri quot meliore partiendo te. Eu duo populo doctus instructior, soleat labores dissentiunt ad sea. Falli consequat per no, eros dictas mei cu.</p> </div> </div> </article>
Summary
Let’s end it up here for today. In the next part we will practice on some more examples and explore offsets we touched today along with pulling and pushing classes available in Bootstrap. Until then, enjoy the day.
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
