Start learning with our library of video tutorials taught by experts. Get started

Up and Running with Bootstrap 2

Adding the basic navigation bar


From:

Up and Running with Bootstrap 2

with Jen Kramer

Video: Adding the basic navigation bar

Bootstrap ships with a nav bar that you can use in your web pages. This nav bar comes with many, many options for customization and styling. I'm at getbootstrap.com, and if you take a look here at that black navigation bar that is at the top of the web page, this is the navigation bar that we're going to work on coding next. So if you take a look at your Dreamweaver document, you'll notice the code looks very familiar compared to what we just had out in the previous video. It's a simple navigation bar. You can see that we have a nice bulleted list here.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Up and Running with Bootstrap 2
2h 38m Beginner Oct 12, 2012

Viewers: in countries Watching now:

Bootstrap is a free web development tool from Twitter that, with a little bit of CSS and JavaScript experience, makes building websites quick, intuitive, and fun. Author Jen Kramer explores its 12-column grid layout; typography and icon libraries; fully functional components like nav bars, buttons, and tabs; and much more. This course also shows how to add JavaScript extras like dropdown menus, modal windows, and photo carousels.

Topics include:
  • Understanding the difference between default and fluid grids
  • Nesting with fluid grids
  • Creating a thumbnail gallery
  • Adding block quotes and lists of text
  • Incorporating images and icons
  • Adding breadcrumb navigation and pagination
  • Using tabs and pills navigation
  • Making the nav bar responsive with JavaScript
  • Adding dropdown menus to the nav bar, tabs, and pill
Subjects:
Web CMS Blogs Responsive Design Web Design
Software:
Bootstrap
Author:
Jen Kramer

Adding the basic navigation bar

Bootstrap ships with a nav bar that you can use in your web pages. This nav bar comes with many, many options for customization and styling. I'm at getbootstrap.com, and if you take a look here at that black navigation bar that is at the top of the web page, this is the navigation bar that we're going to work on coding next. So if you take a look at your Dreamweaver document, you'll notice the code looks very familiar compared to what we just had out in the previous video. It's a simple navigation bar. You can see that we have a nice bulleted list here.

So this is our starting point, and we're going to go ahead and start adding a few classes here to make his navigation bar. With any navigation bar that we make in Bootstrap, the very first step is to set our ul to have a class of nav, and then second, we're going to need to pick an active link here in our list, so li will have a class of active, and I'm going to set that on the home link, so that's step number one. Step number two is we're going to take this nav tag that I have on the outside of this, and I'm going to add another class to that as well.

So, I'm going to add the class here of navbar, and we need to add a div that goes around this as well, which seems to be important to the styling. So I'm going to add a div with a class of navbar-inner, and of course, don't forget to close that div down near the bottom. If we take a look at what we've got so far, just go ahead and save--so Ctrl+S or Command+S to save--and then let's preview this page in Firefox, you'll see that we have a navigation bar that will appear across the top of our page, very nice hover states on the links that are here.

The currently occupied page is indicated here with this nice gray box around the word Home, so everything is looking particularly lovely. One thing that we are missing is some kind of indication for what website that we are on, and that is also included in the specification for the navigation bar, so we can add that. Inside of Dreamweaver just after the div with the class of navbar-inner, we're going to add a class of brand. You, of course, can make this link anywhere that you like, probably back to your homepage, and you're going to put in the text that you want to appear as the identification for the website, so in this case, this will be the Roux Academy Conference /a, and if we save that again and we take a look at our web page here in Firefox, you'll see that we have some nice identification, which is clickable, will take me back to the homepage, would probably be the way that I would code it, and we have a navigation bar that appears here.

Now if I minimize my Firefox browser and I start to pull this in, you'll notice that the styling here kind of falls apart a little bit. You'll notice that the navigation wraps onto the next line, apart from the brand, which is nice. It's degrading somewhat gracefully here, but as I get particularly small, say mobile phone small, you can see that this is not as pretty as perhaps it could be. That's because we haven't added responsive aspect to this particular navigation bar just yet, but I've given you some basic styling for the navigation bar so far.

One last thing that you probably have noticed is that when we took a look at the navigation bar inside of Bootstrap, it was black, but here inside of my example it's white, and it's actually perhaps a little bit difficult to see here on the screen with this big white background next to it, but you can actually make this navigation bar black as well. So inside of Dreamweaver, up here where we have the nav with the class of navbar, go ahead and add navbar-inverse, and this will give you the inverted color.

If you Refresh the page again, we now have a black navbar closer to what you saw on that Bootstrap page. So this is the most basic markup for the navigation bar that ships with Bootstrap. We've gone through some simple things like setting up the general structure of it, we've added some branding to it so that we know what website we're on, and we also changed the color of this to black, so we have a white version and a black version of this particular navigation bar. Of course, you're more than welcome to override any of these colors or styles with your own, using a custom style sheet.

Find answers to the most frequently asked questions about Up and Running with Bootstrap 2.


Expand all | Collapse all
Please wait...
Q: I am trying to create the image carousels shown in this course, and they are not functioning properly. The custom.css file seems to be missing from the exercise files and I think this is the reason. Can you provide it?
A: custom.css isn't created until the carousel indicators are added. However, these styles have to do with the way the indicators look, and nothinghas to do with the way the carousel functions.
 
Are you sure you're working with Bootstrap 2.x? You download that from here: 
http://getbootstrap.com/2.3.2/. The carousel changed radically between Bootstrap 2.x and Bootstrap 3, and this course might not work with version 3.
Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Up and Running with Bootstrap 2.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked