Building with Bootstrap

On the Grid

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.


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.

Community Forums
Get help and ask questions in the Codecademy Forums
Report a Bug
If you see a bug or any other issue with this page, please report it here.