Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Adding the basic navigation bar

From: Up and Running with Bootstrap 2

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.

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.

Show transcript

This video is part of

Image for Up and Running with Bootstrap 2
Up and Running with Bootstrap 2

32 video lessons · 19622 viewers

Jen Kramer
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

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.


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.

Join now "Already a member? Log in

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

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.