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

Adding breadcrumbs

From: Up and Running with Bootstrap 2

Video: Adding breadcrumbs

The next aspect of the Bootstrap framework that I will examine includes the various methods of creating navigation systems. Bootstrap offers many different widgets for doing this, including tabs, pills, buttons, dropdowns, lists, and full navigation bars, as well as helper systems like Breadcrumbs and Pagination. As you'll see in the next chapter, these systems can be combined with JavaScript to include dropdowns in many cases. But for now, I'd like to start with taking a look at Breadcrumbs.

Adding breadcrumbs

The next aspect of the Bootstrap framework that I will examine includes the various methods of creating navigation systems. Bootstrap offers many different widgets for doing this, including tabs, pills, buttons, dropdowns, lists, and full navigation bars, as well as helper systems like Breadcrumbs and Pagination. As you'll see in the next chapter, these systems can be combined with JavaScript to include dropdowns in many cases. But for now, I'd like to start with taking a look at Breadcrumbs.

A breadcrumb is a trail of links that you might see at the top of a web page that indicates where you are in the website's hierarchy. For example, if you're at lynda.com and you're taking a look at my author page, you'll see that the breadcrumb is located up here at the very top of the web page just under the Navigation Bar. This indicates that you're on the page talking about Jen Kramer, and to get there you had gone through the author's page, which would list all of the authors on the website. And before that you were at, in this case, lynda.com's homepage.

We can create this exact same navigation system inside of Bootstrap. Bootstrap comes with a system for styling breadcrumbs, and I'd like to take a look at that now. So if we go back to Dreamweaver, and you open up the document that's inside of your exercise files, you will see that this is actually the breadcrumb we just saw in lynda.com but without any styling applied to it. If I view this in my web browser right now, you'll see that it's just a bulleted list with some links included and some of the LIs, as well as a separator which is that little double-angle bracket.

So now we need to add a little bit of styling to this and a little bit of extra markup to make this a breadcrumb. So, first of all, since we have this displayed on a web page, we can certainly incorporate the grid system into laying this out. If you choose to do that anywhere along the way in these examples, what you would do is, of course, you'd start with a div with a class of container-fluid as we've done before. And don't forget to close that div.

And you can follow that with the call to your row-fluid. So we're going incorporate our div with a class of row-fluid, and don't forget to close that div. And then the last part of this would be what's inside of that row. At this point we usually incorporate some kind of tag that would have the span class inside of it, that would indicate how many rows this particular aspect of the website will span, and I'd like this to span to all 12 columns.

The question is what kind of markups should we use to do that? And I've done a little bit of research about this in the community online, and there is a little bit of debate about what the best kind of markup is for breadcrumb. So my feeling on it is that the best tag to use is the nav tag, because breadcrumbs are a form of navigation. Some people disagree with this and say that the nav tag should be used only in cases of major navigation elements, like the main navigation on a web page. So, what my argument would be is I am going to use the nav tag to mark up elements on my web page that are related to navigation.

So I am going to go ahead and use the nav tag here to indicate this is where my breadcrumb is going to be. So, I'm going to put in a nav with a class of span12 because I'd like this to go stretch all the way across the page. And of course, I am going to close that down here. And let me put in a couple of tabs here just so that this code is a little bit easier to read, and one, two, three over for the ul, and four over for each of the LIs. Okay.

So now that we've got that setup, actually we've done very little with what we've incorporated here at this point. All we've done is incorporate some additional markup with a bulleted list, and this is not any particular special bulleted list at this point in time. It's just a bulleted list. So, if we just save this page right now and we take a look at it again inside of Firefox, you will see that actually nothing has really changed too much. You might have seen it twitched a little bit over from the left column, that has to do with the grid system and its spacing and margins and so forth. All right! So now let's add the actual markup that makes this a breadcrumb inside of Bootstrap.

So the fastest and simplest way to do that is right here inside of the ul tag. We're going to add a class, and this will be a class of breadcrumb, breadcrumb singular, that would be the part that I would miss and call it breadcrumbs, plural. But it is breadcrumb, singular, inside of the code. The second thing that we're going to add to make this a breadcrumb is we're going to indicate which item is active. So on the lynda.com example, we were on the Jen Kramer Author page. So Jen Kramer would be the active aspect of the breadcrumb indicating where you are.

Active is a class that is used all over Bootstrap to indicate where you are. You will see it used many times in this navigation chapter. So, I am going to add a class right here on this li of active, and that will indicate where we are in the hierarchy. And the last thing that I'm going to do is specify these particular little spacers, and we can do that right here in front of these little double-arrow guys. We'll add a span with a class of divider, and close that with a /span, and we'll apply that to the second divider as well, along with the /span.

And so that indicates that the little character that I am using here, which is this double arrow, would be what's going to separate my breadcrumb. You, of course, could use any character that you like in that process. So I am going to go ahead and save this, Ctrl or Command+S to Save, and let's take a look at it again in Firefox. You will notice that this looks pretty radically different. Now, we have a nice-looking breadcrumb, it's shaded black just slightly, and it has very nice spacing to it. You can see that the character in between is nicely styled as well, screen blacked just a little bit so that you can see that there's a separator, but it's not dominating the look of this particular breadcrumb.

There is another treatment that we could give to this if we wished. In one of the previous videos, I talked about the glyphicons that come with Bootstrap, and we could incorporate one of those as our divider if we wished. So, what we would do if we chose to change out these little characters instead for an icon is right here inside of the class where it says divider, go ahead and just add icon-arrow-right, for example.

And that will give as a little arrow icon instead of the HTML character that I am using here. Of course, you will need to get rid of the HTML character, if you choose to do that. So I am going to leave the other one the way we had it set up so that you have an example of each treatment. And I'm going to go ahead and save that again, and we'll take a look at it inside of Firefox, Refresh the page. So you see here I have my icon now that's separating the items in my breadcrumb. And remember, of course, this is a dark icon. If you prefer to use the white, remember just like we saw in the glyphicon video, you can say icon-white and that will load the inverse image.

So just to see that in action, we'll go ahead and Refresh the page. So you can see that, that is the inverse, the lighter color icon. Of course, it actually looks better dark. It's pretty hard to see that white arrow there. But if you had played around with styling here and you changed some of the colors, white might be a better choice. So I am going to go hop back into Dreamweaver and take out that icon-white aspect and save this. So, now you've seen how to incorporate a breadcrumb into your web page. It's very simple. We just add a few classes to style up our breadcrumb.

You can use all kinds of different HTML characters as separators in between the navigational elements inside of your breadcrumb, or of course, you could use one of the glyphicons that ships with Bootstrap.

Show transcript

This video is part of

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

32 video lessons · 19632 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.