Layout

A well-designed layout makes the information it contains easy to consume. It's a fundamental part of any piece of visual communication. Let's make sure we're getting it right.

Ultraviolet builds on top of the Bootstrap CSS Framework.

How to take advantage of Bootstrap's grid and nesting columns.
Learn even more at getbootstrap.com.

Basics

Bootstrap’s grid system uses a series of containers, rows, and columns to lay out and align content. It’s built with flexbox and is fully responsive. Below is an explanation and some examples of how the grid comes together.

The Hierarchy

In the order of parent to children, the grid system works in this order: .container > .row > .col > [content]. First you declare a container (more on that below), then you add your first row. Within rows are columns (cols). Columns are where our content lives. There are column classes to use to make sure that layout is correct regardless of screen size/device.

The Power of 12

Bootstrap's grid system is a 12-column design. Column systems are remnants of print media like newspapers, where the paper's layout uses a set of columns. When a reporter says they have a "column" in the paper (meaning article), it means the reporter's article is laid out in single or multiple columns.

All the math to determine how to fill up a row with cols must add up to 12. In fact, this guide is using the 3 + 6 + 3 col sizes (in browser widths greater than 992px) for its layout. All of the rows and columns are wrapped in the .container-fluid class that allows the layout to use the full width of the browser window. If we were not a full-screen application, we could use just the .container class which would center our content in a container with a max-width of 1140px (on a desktop monitor).

Below are two examples of layouts using these columns (cols). The first uses a three-column size for the left and right columns and a six column size for the middle/main column. The second example uses three equal four-column sizes. So, 3 + 6 + 3 = 12 and 4 + 4 + 4 = 12. Yay math.

<!-- Columns in each row add up to 12 -->
<div class="row">
  <div class="col-sm-3">
    .col-3
  </div>
  <div class="col-sm-6">
    .col-6
  </div>
  <div class="col-sm-3">
    .col-3
  </div>
</div>
<div class="row">  
  <div class="col-sm-4">
    .col-4
  </div>
  <div class="col-sm-4">
    .col-4
  </div>
  <div class="col-sm-4">
    .col-4
  </div>
</div>

Nesting

You can nest columns within other columns. This gives you the flexibility to lay out content any way you want without resorting to your own classes. To nest cols within another col, you must add a row within the parent column. For instance, the example below follows this pattern: .col-3 .col-9 > .row > .col-6 .col-6 > .row > .col-5 .col-7.

<div class="row">
  <div class="col-sm-3">
    .col-3
  </div>
  <div class="col-sm-9">
    .col-9
    <div class="row">
      <div class="col-sm-6">
        .col-6
      </div>
      <div class="col-sm-6">
        .col-6
        <div class="row">
          <div class="col-sm-5">
            .col-5
          </div>
          <div class="col-sm-7">
            .col-7
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Responsive

As mentioned above, Bootstrap is built as a mobile-first framework. This means that the columns we use have screen-size breakpoints. For instance, this gives us the flexibility when the viewport is extra-large (large monitor desktop), to lay out the columns as 3 + 9. However, when the viewport is iPad sized oriented in landscape, make that same layout 4 + 8. Then when viewed on a mobile device (small viewport), this will make the layout 12 12, effectively making the columns stack on top of each other. We have added classes (augmented) to the standard Bootstrap grid to accomodate larger screen sizes than Bootstrap. When upgrading Bootstrap, this must be taken into consideration.