Click here to navigate the course.

Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

Web Browser

Code Editor
Learn

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!

Report a Bug
If you see a bug or any other issue with this page, please report it here.