Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.