Log in from a computer to take this course

You'll need to log in from a computer to start How to Make a Website with NameCheap. But you can practice or keep up your coding streak with the Codecademy Go app. Download the app to get started.

apple storegoogle store
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.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?