Click here to navigate the course.

Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

Learn

One of the reasons Bootstrap and frameworks like it are so popular is because they offer grids. A grid makes it possible to organize HTML elements using preconfigured columns. Using a grid, you can customize responsive page layouts quickly and reliably.

The Bootstrap grid contains 12 equal-sized columns, as seen in the diagram on the right. HTML elements are arranged to span different numbers of columns in order to create custom page layouts.

Instructions

In the diagram, observe the following:

  1. Bootstrap's grid columns are represented by 12 vertical bars. The boxes represent HTML elements.

  2. The words "container", "jumbotron", "col-sm-6" and "col-sm-3" refer to Bootstrap classes.

  3. The element with class "jumbotron" spans the entire width of the webpage, beyond the borders of the grid.

  4. Elements inside the second "container", such as "col-sm-6" and "col-sm-3" are contained within the grid columns.

  5. Elements labeled "col-sm-3" take up three grid columns; elements labeled "col-sm-6" take up six grid columns.

Take a moment to familiarize yourself with Bootstrap's grid, then click Next to continue.

Report a Bug
If you see a bug or any other issue with this page, please report it here.