A day in the life of a Junior Web Designer

Getting started with Bootstrap

This is the HTML for a Navbar component, which we want to look like this:

Click Preview to see the code in action.

1 <html> 2 <head> 3 4 </head> 5 <body> 6 <nav class="navbar navbar-default"> 7 <div class="container-fluid"> 8 <div class="navbar-header"> 9 <a class="navbar-brand" href="#">iDEA</a> 10 </div> 11 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 12 <ul class="nav navbar-nav"> 13 <li><a href="#what">What's the Big iDEA?</a></li> 14 <li><a href="#thebadges">Badges</a></li> 15 <li><a href="#theawards">Awards</a></li> 16 </ul> 17 </div> 18 </div> 19 </nav> 20 </body> 21 </html>

Preview the code

Hang on. That doesn’t look right. We haven’t told the browser that we are using Bootstrap, so it doesn’t know how to display the Navbar.

We tell the browser we are using Bootstrap, by including links to the Bootstrap files in the section of the page that has information for the browser - the <head></head>.

Paste this line into the code below on line 3 between the <head> and </head> and then click to Preview the code again:

This will tell the browser to use the Bootstrap stylesheet.

1 <html> 2 <head>

4 </head> 5 <body> 6 <nav class="navbar navbar-default"> 7 <div class="container-fluid"> 8 <div class="navbar-header"> 9 <a class="navbar-brand" href="#">iDEA</a> 10 </div> 11 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 12 <ul class="nav navbar-nav"> 13 <li><a href="#what">What's the Big iDEA?</a></li> 14 <li><a href="#thebadges">Badges</a></li> 15 <li><a href="#theawards">Awards</a></li> 16 </ul> 17 </div> 18 </div> 19 </nav> 20 </body> 21 </html>

Preview the code

Something's not quite right. Try again. Copy the code and paste it into line 3.

This is better, but it still isn't quite the same as our design:

We need to replace the text that says the name of the site with an image.

Look for class="navbar-brand" on line 9, highlight the site title, iDEA, and paste this code over it:

Top tip: Did you know you can double click the a word to highlight all of it? Try double-clicking iDEA on line 9 to highlight it.

1 <html> 2 <head> 3 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 4 </head> 5 <body> 6 <nav class="navbar navbar-default"> 7 <div class="container-fluid"> 8 <div class="navbar-header"> 10 </div> 11 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 12 <ul class="nav navbar-nav"> 13 <li><a href="#what">What's the Big iDEA?</a></li> 14 <li><a href="#thebadges">Badges</a></li> 15 <li><a href="#theawards">Awards</a></li> 16 </ul> 17 </div> 18 </div> 19 </nav> 20 </body> 21 </html>

Preview the code

You selected the wrong bit.
You selected
Try again.

Not quite. Try again.

Your code should looks like this:

Perfect. So on this page we've done two things - we've added a style sheet so the page looks a certain way and we've used an image which we can use for navigation. Ok, let's crack on.

On to the next task

Getting started with Bootstrap

Sorry