Lesson Thursday

Lining up content evenly with only HTML and CSS can prove to be pretty challenging. That's why another most commonly-used Bootstrap feature is their grid system. The grid system allows us to use several Bootstrap classes to quickly create a wide variety of invisible grids that neatly space and line up content.

In this lesson, we'll explore how to implement this powerful feature in our own projects.

The Bootstrap grid system contains just two parts: Rows and columns. Both of them are simply div tags with either a row or column class applied to them.

Rows

HTML for the row is always the same. As you can see, it's simply a div with the class row:

<div class="container">
  <div class="row">
        ...
  </div>
</div>

(Note: Remember, when you see ellipses (...) in a code snippet, it means portions of the file were omitted from the example. This keeps examples brief, making it easier to identify what/where new code is added.)

  • Rows must reside in a container. They don't necessarily need their own special container; if everything within the <body> tags is housed in a container div, that will work just fine.

  • Additionally, all columns must reside within a row. And each row may contain up to 12 column units. We'll discuss this in further detail in just a moment.

Columns

Columns can include just about any valid HTML, not just text. We could place images, wells, panels, headers, other divs, or other content in a Bootstrap column.

  • Their class always begins with col, which is short for "column".

  • Columns also have more customizable options than rows. Their class name contains two additional pieces of information denote what media queries should be applied to it, and how many units its width should be.

Column Class Name Format

The format for these class names looks like this:

col-<media query>-<width>

Media Query

The media query portion of the column class name has several options:

  • xs: "Extra small"
  • sm: "Small"
  • md: "Medium"
  • lg: "Large"

Each of these refer to built-in media queries that can be applied to the columns. We'll explore these momentarily.

Width

The width part of the column class name may be any number from 1 to 12. But remember, a row can only be 12 units wide. So, a row could fit 12 columns with a width of 1, 2 columns with a width of 6, or 3 columns with a width of 4.

Examples

Here is an example column that is 12 units wide. Notice it is the only column in its row, because a row may only contain 12 units:

<div class="container">
  <div class="row">
     <div class="col-md-12">...</div>
  </div>
</div>

Conversely, we could also create a row with 12 columns with a width of 1:

<div class="container">
   <div class="row">
      <div class="col-md-1">...</div>
      <div class="col-md-1">...</div>
      <div class="col-md-1">...</div>
      <div class="col-md-1">...</div>
      <div class="col-md-1">...</div>
      <div class="col-md-1">...</div>
      <div class="col-md-1">...</div>
      <div class="col-md-1">...</div>
      <div class="col-md-1">...</div>
      <div class="col-md-1">...</div>
      <div class="col-md-1">...</div>
      <div class="col-md-1">...</div>
   </div>
</div>

The HTML above would result in something like this:

12-column-row

Rows may also contain a combination of different column widths, as long as they do not surpass 12. For instance, a row could contain one column with a width of 8 and another with a width of 4, because this still equals 12:

<div class="container">
  <div class="row">
    <div class="col-md-8">...</div>
    <div class="col-md-4">...</div>
  </div>
</div>

This would result in:

different-column-sizes

Adding a Grid

We currently have 6 sections in our "First Week at Epicodus" website: Command Line, HTML, CSS, Bootstrap, and Partnering. Let's organize these into a grid system. We'll use 2 rows of 3 columns.

We want our columns to be equal. If there will be 3 columns per row, and the full width of a Bootstrap grid row is 12 units, we can divide 12 by 3 to receive 4. So, each column should be 4 units wide.

We'll add 2 rows. The first will begin before our first section, and end after our third section. The second will begin after our third section, and end after our last section. Remember, all columns must reside in a div with a row class:

index.html
...

      <div class="row">
        <div class="well">
          <h2>Command Line</h2>
          <ul>
            <li>Navigating my documents through the command line.</li>
            <li>Creating new files and folders through the command line.</li>
            <li>Moving and deleting files and folders through the command line.</li>
            <li>Retrieving my current location from the command line.</li>
          </ul>
        </div>
        <div class="panel panel-info">
          <div class="panel-heading"
            <h2 class="panel-title">Git and GitHub</h2>
          </div>
          <div class="panel-body">
            <ul>
              <li>Initializing local Git repository, and create remote GitHub repositories.</li>
              <li>Tracking and committing changes with Git.</li>
              <li>Pushing a local Git repository to a remote GitHub repository.</li>
              <li>Branching a project to make multiple copies.</li>
              <li>Merging multiple Git branches back together.</li>
              <li>Cloning down a project from GitHub to my local machine.</li>
              <li class="bg-success">Publishing a website on GitHub pages.</li>
            </ul>
          </div>
        </div>
        <h2>HTML</h2>
        <ul>
          <li>Using HTML tags to create websites.</li>
          <li>Indenting and organize HTML correctly.</li>
          <li>Incorporating block elements.</li>
          <li>Including inline elements.</li>
          <li>Using both spans and divs.</li>
          <li>Adding classes and ID's to style HTML with CSS.</li>
        </ul>
      </div>

      <div class="row">
        <h2>CSS</h2>
        <ul>
          <li>Creating a stylesheet.</li>
          <li>Using CSS selectors to specify an HTML element.</li>
          <li>Writing CSS rules to style particular elements in my HTML.</li>
          <li>Floating elements to create columns, sidebars, and other alignments.</li>
          <li>Padding, margins, and the box model.</li>
          <li>How CSS cascades to apply styles.</li>
          <li>The importance of responsive design.</li>
          <li class="bg-success">How to use media queries to dynamically change the appearance of a site based on the user's viewport.</li>
        </ul>
        <h2>Bootstrap</h2>
        <ul>
          <li>What front-end frameworks do.</li>
          <li>Downloading and installing Bootstrap.</li>
          <li class="bg-success">Adding Bootstrap styles to a website.</li>
          <li>Navigating Bootstrap documentation.</li>
          <li>Creating websites with Bootstrap.</li>
        </ul>
        <h2>Partnering</h2>
        <blockquote class="bg-info">
          <p>"It's been really good working with you!"</p>
          <footer>My partner the first day</footer>
        </blockquote>
      </div>
    </div>
  </body>
</html>

Now, we'll wrap each existing section in a div column with the class col-md-4:

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>My First Week at Epicodus</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div class="container">
      <div class="jumbotron">
        <h1>My First Week at Epicodus</h1>
        <p>
          I've almost finished my first week at Epicodus. Here are some of the things I've learned so far:
        </p>
      </div>
      <div class="row">
        <div class="col-md-4">
          <div class="well">
            <h2>Command Line</h2>
            <ul>
              <li>Navigating my documents through the command line.</li>
              <li>Creating new files and folders through the command line.</li>
              <li>Moving and deleting files and folders through the command line.</li>
              <li>Retrieving my current location from the command line.</li>
            </ul>
          </div>
        </div>
        <div class="col-md-4">
          <div class="panel panel-info">
            <div class="panel-heading"
              <h2 class="panel-title">Git and GitHub</h2>
            </div>
            <div class="panel-body">
              <ul>
                <li>Initializing local Git repository, and create remote GitHub repositories.</li>
                <li>Tracking and committing changes with Git.</li>
                <li>Pushing a local Git repository to a remote GitHub repository.</li>
                <li>Branching a project to make multiple copies.</li>
                <li>Merging multiple Git branches back together.</li>
                <li>Cloning down a project from GitHub to my local machine.</li>
                <li class="bg-success">Publishing a website on GitHub pages.</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <h2>HTML</h2>
          <ul>
            <li>Using HTML tags to create websites.</li>
            <li>Indenting and organize HTML correctly.</li>
            <li>Incorporating block elements.</li>
            <li>Including inline elements.</li>
            <li>Using both spans and divs.</li>
            <li>Adding classes and ID's to style HTML with CSS.</li>
          </ul>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4">
          <h2>CSS</h2>
          <ul>
            <li>Creating a stylesheet.</li>
            <li>Using CSS selectors to specify an HTML element.</li>
            <li>Writing CSS rules to style particular elements in my HTML.</li>
            <li>Floating elements to create columns, sidebars, and other alignments.</li>
            <li>Padding, margins, and the box model.</li>
            <li>How CSS cascades to apply styles.</li>
            <li>The importance of responsive design.</li>
            <li class="bg-success">How to use media queries to dynamically change the appearance of a site based on the user's viewport.</li>
          </ul>
        </div>
        <div class="col-md-4">
          <h2>Bootstrap</h2>
          <ul>
            <li>What front-end frameworks do.</li>
            <li>Downloading and installing Bootstrap.</li>
            <li class="bg-success">Adding Bootstrap styles to a website.</li>
            <li>Navigating Bootstrap documentation.</li>
            <li>Creating websites with Bootstrap.</li>
          </ul>
        </div>
        <div class="col-md-4">
          <h2>Partnering</h2>
          <blockquote class="bg-info">
            <p>"It's been really good working with you!"</p>
            <footer>My partner the first day</footer>
          </blockquote>
        </div>
      </div>
    </div>
  </body>
</html>

And look! Just like that, we have a grid:

columns-lined-up

Sure, the different wells, panels, and formatting we've used makes everything look a little inconsistent; but that's alright, we're still experimenting! Despite this, notice that everything is spaced and lined up evenly!

Also, if you reduce the width of the browser the columns automatically stack at a certain width:

collapsed-columns

If the numbers included with the column class (ie: col-md-4 or col-md-1, for example) don't add up to 12 in each row, the row's columns will not expand to fill the entire area of the grid. Let's see what this looks like.

Let's temporarily change the class of one of our columns from col-md-4 to col-md-1:

index.html
...
        <div class="col-md-1">
          <div class="well">
            <h2>Command Line</h2>
            <ul>
              <li>Navigating my documents through the command line.</li>
              <li>Creating new files and folders through the command line.</li>
              <li>Moving and deleting files and folders through the command line.</li>
              <li>Retrieving my current location from the command line.</li>
            </ul>
          </div>
        </div>
...

uneven-columns

The first column in the first row is squished into 1 of the 12 total units of grid area, instead of taking up 4 units like the other columns.

As you implement grids into your own sites, experiment with different column sizes. Change up how many columns exist per row, if necessary. And always ensure the number included in the column class adds up to 12 for each row.

Grid Responsiveness

But how do we know which media query to use in our column class names?

As we briefly discussed, Bootstrap has four tiers of media queries:

  • Phones - xs
  • Tablets - sm
  • Desktops - md
  • Large Desktops - lg

The xs, sm, md, and lg prefixes in column classes denote how narrow the viewport may become before the columns stack upon one another. That is, how wide their breakpoint is. Depending on which prefix we use in our column class names, a different built-in media query will be applied to the column.

Remember when we resized our browser window after adding columns? At a certain width, the columns no longer appeared side-by-side. They stacked like this:

stacked-columns

The xs prefix applies the "phone" media query to the column. This media query will allow columns to become as narrow as they possibly can before stacking them.

lg, on the other hand, is meant for large Desktops. It will stack columns at a much wider width than md. And md will stack at a wider width than sm or xs, but will allow columns to become narrower than lg before stacking.

The Media Queries section of the Bootstrap Grid Documentation details which media queries apply to which prefixes.

Experiment with these in your own grids to both see them in action, and decide which media queries fit your particular project best!

Overview


  • The Bootstrap grid system contains just two parts: Rows and columns. Both of them are simply div tags with either a row or column class applied to them.

Rows

  • HTML for the row is always the same. It's a div with the class row:
<div class="container">
  <div class="row">
        ...
  </div>
</div>
  • Rows must reside in a container. But they don't need their own special container; everything within the <body> tags can simply be housed in a container div.
  • All columns must reside within a row.
  • Each row may contain up to 12 column units.

Columns

  • Columns can include just about any valid HTML.
  • Their Bootstrap class always begins with col.
  • Columns also have more customizable options than rows. Their class name contains two additional pieces of information denote what media queries should be applied to it, and how many units its width should be.

Column Class Name Format

The format for these class names looks like this:

col-media query-width

Media Query

  • The media query portion of the column class name has several options:

  • xs: "Extra small"

  • sm: "Small"

  • md: "Medium"

  • lg: "Large"

Each of these refer to built-in media queries that can be applied to the columns.

Width

The width part of the column class name may be any number from 1 to 12. A row can only be 12 units wide. So, a row could fit 12 columns with a width of 1, 2 columns with a width of 6, or 3 columns with a width of 4.

Examples


Here is an example column that is 12 units wide. It is the only column in its row, because a row may only contain 12 units:

<div class="container">
  <div class="row">
     <div class="col-md-12">...</div>
  </div>
</div>

We could also create a row with 12 columns with a width of 1:

<div class="container">
   <div class="row">
      <div class="col-md-1">...</div>
      <div class="col-md-1">...</div>
      <div class="col-md-1">...</div>
      <div class="col-md-1">...</div>
      <div class="col-md-1">...</div>
      <div class="col-md-1">...</div>
      <div class="col-md-1">...</div>
      <div class="col-md-1">...</div>
      <div class="col-md-1">...</div>
      <div class="col-md-1">...</div>
      <div class="col-md-1">...</div>
      <div class="col-md-1">...</div>
   </div>
</div>

The HTML above would result in:

12-column-row

Rows may also contain a combination of different column widths, as long as they do not surpass 12. For instance, a row could contain one column with a width of 8 and another with a width of 4, because this still equals 12:

<div class="container">
  <div class="row">
    <div class="col-md-8">...</div>
    <div class="col-md-4">...</div>
  </div>
</div>

This would result in:

different-column-sizes