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
Building with Bootstrap


Let's use Bootstrap's grid to create a simple header with navbar.

In the example code below, an HTML header element with Bootstrap's predefined container class is used:

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

Inside the header, a row is created by using a div with Bootstrap's row class:

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

Finally, the row is cut into two parts:

<header class="container"> <div class="row"> <h1 class="col-sm-4">Heading</h1> <nav class="col-sm-8 text-right"> <p>nav item 1</p> <p>nav item 2</p> <p>nav item 3</p> </nav> </div> </header>

The first part consists of the h1 with Bootstrap's class col-sm-4. It will take up the first four columns on the grid. The second part consists of the nav element with class col-sm-8. It will take up the remaining eight grid columns. text-right indicates that text will be arranged on the right side of the nav.

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