Skip to Content
Learn
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!

Instructions

1.

In index.html, one line below the closing </section> tag of the jumbotron, start building a supporting content section. First, create a section element with the class container that will contain supporting content.

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

Run your code to continue. There won’t be a visual difference on the webpage yet.

2.

Inside the opening <section class="container"> tag, create two divs with the Bootstrap class row:

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

Be sure to include </div> closing tags for your rows!

Run your code to continue. There won’t be a visual difference on the webpage yet.

3.

Inside each row, create two figure elements with the Bootstrap class col-sm-6:

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

Make sure you have a total of four figure elements.

Run your code to continue. As in previous steps, no change will be seen the web browser.

4.

Finally, inside each figure, add two additional elements:

1.A p element that contains one of the following catagories:

-kitchen
-woodwork
-gifts
-antiques

For example:

<p>kitchen</p>

2.An image element containing one of the following image URLs:

https://content.codecademy.com/projects/make-a-website/lesson-4/kitchen.jpg
https://content.codecademy.com/projects/make-a-website/lesson-4/woodwork.jpg
https://content.codecademy.com/projects/make-a-website/lesson-4/gifts.jpg
https://content.codecademy.com/projects/make-a-website/lesson-4/antique.jpg

Here is a hint on how to create img elements.

Here is how the webpage should look like when you’ve completed this step.

Run your code to view the supporting content section in the web browser. If you toggle between screen widths, you will see how the layout changes

Folder Icon

Take this course for free

Already have an account?