Now that we have an understanding of how the layout works in Bootstrap and how to use containers, let’s focus our attention to rows.

As mentioned in the previous exercise, rows are nested within containers. Also, we can add as many rows as we want inside a container. By default, a row will take up the entire width of its parent container. To create a row we assign a class of "row" to an element. Take a look at the provided example with a nested row inside a container:

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

Let’s now add some rows to our web page!



We’ve added some color to the container and rows that are on the web page to differentiate between the container and row elements. We’ve given rows an orange background color and a solid yellow border.

Inside the container, add two <div>s and make both elements rows.

Add some content, like text, inside the <div>s to give the <div>s some height!

Sign up to start coding

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?