Offsetting

One neat feature of the grid system is how it allows you to create empty space within your row using columns. If you wanted to list the categories and sizes but, for some reason, you wanted to leave the space for Medium empty, in other grid systems you may need to add the empty elements to the markup to get the desired effect. Consider the given example:

<div class="container">
<h1>Our Print Sizes</h1>
<div class="row">
   <div class="col-6 col-sm-3">
      <h5>Small</h5>
      <div class="row">
         <div class="col-sm-4">6x5</div>
         <div class="col-sm-4">8x10</div>
         <div class="col-sm-4">11x17</div>
         &lt;/div>
      </div>
      <div class="col-6 col-sm-3"></div>
      <div class="col-6 col-sm-3">
         <h5>Large</h5>
         <div class="row">
            <div class="col-sm-4">19x27</div>
            <div class="col-sm-4">20x30</div>
            <div class="col-md-4">22x28</div>
         </div>
      </div>
      <div class="col-6 col-sm-3">
         <h5>Extra Large</h5>
         <div class="row">
            <div class="col-md-4">24x36</div>
            <div class="col-md-4">27x39</div>
            <div class="col-md-4">27x40</div>
         </div>
      </div>
   </div>
</div>

Observe the following screenshot:

While it has the desired effect, it is adding markup simply for the sake of layout, which isn't really what we want to do if we can avoid it. Bootstrap allows us to avoid it via the offset classes. The offset classes follow the same convention as the rest of the column classes, offset-*-*. Now, we can remove the empty layout elements and simply add the offset classes to the Large columns. Take a look at the following code:

<div class="col-6 col-sm-3">
   <h5>Small</h5>
   <div class="row">
      <div class="col-sm-4">6x5</div>
      <div class="col-sm-4">8x10</div>
      <div class="col-sm-4">11x17</div>
   </div>
</div>
<div class="col-6 col-offset-6 col-sm-3 offset-sm-3">
   <h5>Large</h5>
   <div class="row">
      <div class="col-sm-4">19x27</div>
      <div class="col-sm-4">20x30</div>
      <div class="col-md-4">22x28</div>
   </div>
</div>
<div class="col-6 col-sm-3">
   <h5>Extra Large</h5>
   <div class="row">
      <div class="col-md-4">24x36</div>
      <div class="col-md-4">27x39</div>
      <div class="col-md-4">27x40</div>
   </div>
</div>

Voila! We have the same result with less code, the goal we all aim to achieve.

With containers, rows, and columns, we can now think about our layout more easily. By splitting a viewport into understandable chunks and concepts, the grid system gives us a structure to apply our content.