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
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.
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.
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.
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.
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.