Table of Contents
In previous part we were introduced to basic fundamentals of Bootstrap’s grid system covering media queries and breakpoints, container, rows and columns. This might be enough for some small project like single-page website, but why stop here? Why not to take it to another level? Today, we will explore nested rows and columns and also how to offset elements across the page with use of specific classes and mathematics. Without further ado, let’s begin!
Nesting
In part 1, we practiced rows and columns on example of simple article containing one heading and paragraphs. To start this in a bit easier way, let’s create centered row covering half of the page. It will be divided into two separate columns containing text. So, the markup will be one div with class row, inside this will be nested another div with class col-xs-12, col-lg-6 and col-lg-offset-3. This means on screen smaller than 768px the row will be full-width (col-xs-12) while on screen bigger than 992px it will take half of the page (col-lg-6) and center itself (col-lg-offset-3 – moved 25% from left). Inside this row we will create another div with class row and nest two divs with class col-sm-6 with text in p element inside them. Class col-sm-6 will cause dividing the row in second level (nested row) on screen 768px and more to split into two columns.
HTML:
<div class="row">
<div class="col-xs-12 col-lg-6 col-lg-offset-3">
<div class="row">
<div class="col-sm-6">
<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 class="col-sm-6">
<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.</p>
</div>
</div>
</div>
</div>
Now we are going to take the example from previous part and make it more complex by adding few more paragraphs and image under the heading which will be centered. To center the image you can either use CSS – set display to block and margin to auto – or use class center-block included in Bootstrap which will do exactly the same thing (apply the same CSS rules on the image).
To make it even more interesting and offer special reading experience (well … ) we will use nesting to divide some of the rows into columns to create 2-column and 3-column lines. Do you remember the rule of thumb about proper markup from part 1? Only child of element with class row should be some element with class col-*. This means that when you want to create new row (in existing container) that will be divided into columns, you have to create new column for whole line inside it first, then in this new column create another row and, finally, inside this row create number of columns using specific classes.
HTML:
<article class=”container”>
<div class=”row”>
<div class=”col-xs-12 col-lg-6 col-lg-offset-3”>
<h1 class="text-center">Heading of the post</h1>
</div>
</div>
<div class=”row”>
<div class=”col-lg-6 col-lg-offset-3”>
<img class=”center-block” src="http://pixabay.com/static/uploads/photo/2014/09/24/14/29/mac-459196_640.jpg" alt="Computer" width=250 />
</div>
</div>
<div class=”row”>
<div class=”col-xs-12 col-lg-6 col-lg-offset-3”>
<div class=”row”>
<div class=”col-sm-6”>
<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 class=”col-sm-6”>
<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.</p>
</div>
</div>
</div>
</div>
<div class=”row”>
<div class=”col-xs-12 col-lg-6 col-lg-offset-3”>
<div class=”row”>
<div class=”col-sm-4”>
<p>Vel in vidit aliquid ponderum, dolorem constituto sed no. Sea no iriure audire. Ei alia esse vel, an veniam tritani mediocritatem mea. Temporibus consectetuer at mei. Eam errem regione cu, quo id dico doctus copiosae.</p>
</div>
<div class=”col-sm-4”>
<p>Vero vitae sed ad, nisl meliore sententiae eam at. Cu reque conclusionemque vim. Eum ne sumo recteque, vis tantas probatus et. Melius discere neglegentur te sea, eligendi accommodare et eam.</p>
</div>
<div class=”col-sm-4”>
<p>At eos munere fabellas, per et inciderint conclusionemque. Id per deseruisse elaboraret. Sed solet maiorum torquatos te, at senserit corrumpit vel. No est verterem indoctum repudiandae, ut rebum idque facilis est.</p>
</div>
</div>
</div>
</div>
<div class=”row”>
<div class=”col-xs-12 col-lg-4 col-lg-offset-4”>
<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>
No matter how interesting it might look like, I suggest you to not try layout such as this in your projects because, in case of 3-column row, the readability suffers a lot.
Offsetting
One thing we already touched in previous part is offsetting. Through offsets you can move the content across the page and specific screen resolutions. For example, above we used the col-lg-offset-3 to move the content of article (except the last paragraph) three columns to the left on screens >= 992. Since whole grid contains 12 columns and content is set to 6 columns (col-lg-6), there are 3 columns on each side left. So, by offsetting the content for this 3 columns we centered it.
For example, if you can create three paragraphs, place the first one on the right side of the page, second to middle and third on the left (create stairs), offsets are very useful. Because we have three paragraphs, we will use col-lg-4 class (12 / 3 – 4). First paragraph should be on the right side so we have to use col-lg-offset-8 class to move it to the right (12 (whole grid) – 4 (paragraph) = 8 (blank space)). For the second paragraph we will use col-lg-offset-4. Again, paragraph span over 4 columns so we have 4 columns of blank space on left and right. To center it, we are going to move it for the span of 4 columns on its left side. The last paragraph is on the left and does not need any moving at all.
HTML:
<div class=”container”> <div class=”row”> <div class=”col-lg-4 col-lg-offset-8”> <p>Vasta rilativa sen et. Tiuj duontono helposigno tia id, nk zorgi elparolo subjekto ian. Ina fiksi decimaloj oj. Int he suomio laringalo praantaŭlasta, hav ki participo kunmetita gramatika, sor dz nura finno. Kiu preterito triangulo supreniro ro, tek ut nette tempa nomial, ke nen reen gingivalo.</p> </div> </div> <div class=”row”> <div class=”col-lg-4 col-lg-offset-4”> <p>Nj plus subfrazo esperanto ont, respondo priskribo bis ve. Veo vato trans malantaŭa on, alial centilitro ab ses, afrikato ekskluzive interjekcio nun il. Kab'o solinfano far ts. Us ojd plej falsa, em ing dupunkto kernovorto.</p> </div> </div> <div class=”row”> <div class=”col-lg-4”> <p>Veo ikso kemia konateco ot, certa s'joro cit de, disde nigra ido de. Vela itismo us aha, cia sekse deloke fratineto at, no cis onia emfazado ekzemploj. Ree hemi kompreneble it. I trafe kompreneble antaŭelemento eko, sis dupunkto antaŭeniri an.</p> </div> </div> </div>
Summary
Great! You know how to create rows and columns. You also know how to nest rows to create more complex layouts and you are able to move the content across the rows using offset classes. In part 3 we are going to take a look at the final piece of Bootstrap’s grid system – pulling and pushing content. Until then, practice.
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
