Log in from a computer to take this course

You'll need to log in from a computer to start How to Make a Website with NameCheap. But you can practice or keep up your coding streak with the Codecademy Go app. Download the app to get started.

apple storegoogle store
Learn

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.

Instructions

1.

In index.html, on the line below the opening <body> tag, create a header element with Bootstrap’s container class:

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

Run your code to continue.

2.

Next, inside the opening <header class="container"> tag, create a div with the Bootstrap class row:

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

Run your code to continue.

3.

Now we’ll cut the row into two parts.

The first part: inside the <div class="row"> tag, create an h1 with Bootstrap’s class col-sm-4. The content for the h1 will be the company name. You can use “Skillfair” or anything you’d like:

<header class="container"> <div class="row"> <h1 class="col-sm-4">Skillfair</h1> </div> </header>

Run your code to see the results in the web browser.

4.

Now for the second part of the row. One line below the h1 element, create a nav element with Bootstrap’s class col-sm-8 text-right:

<header class="container"> <div class="row"> <h1 class="col-sm-4">Skillfair</h1> <nav class="col-sm-8 text-right"> </nav> </div> </header>

Run your code to continue.

5.

Finally, inside the opening <nav class="col-sm-8">, create three p elements. The content for each p will be a navigation item. You could use item names such as “newest”, “catalogue” and “contact”:

<header class="container"> <div class="row"> <h1 class="col-sm-4">Skillfair</h1> <nav class="col-sm-8 text-right"> <p>newest</p> <p>catalogue</p> <p>contact</p> </nav> </div> </header>

Run your code to see the completed header/navigation in the web browser.

Take this course for free

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?