Building with Bootstrap

Supporting Content

Many websites have a supporting content area. Supporting content can be arranged using Bootstrap's grid. Below is an example implementation of a supporting content area.

First, an HTML section element with the container class is used:

<section class="container"> </section>

Next, div elements with the row class are added:

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

Finally, the rows are divided by using divs with Bootstrap's col-sm-... class.

<section class="container"> <div class="row"> <div class="col-sm-6"> ... </div> <div class="col-sm-6"> ... </div> </div> <div class="row"> <div class="col-sm-6"> ... </div> <div class="col-sm-6"> ... </div> </div> </section>

Above, two rows are divided into two equal parts. Each part takes up 6 of bootstrap's 12 columns. Using the col-sm-6 class ensures that this layout will appear when the user's screen is the width of a tablet device(768 pixels). On narrower screens, such as an iPhone, only one image per row will appear.

Let's create a supporting content area for our webpage!

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.