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 webpage that indicates where you are in the website's hierarchy. For example, I'm looking at my course here on lynda.com called Bootstrap: Adding Interactivity to Your Site. And you'll see here, at the very top of the page is the breadcrumb. Up here on the top, where it says, all courses. Twitter, Bootstrap. And then Bootstrap, adding interactivity to your site. So this is indicating that you started from a list of all the courses. You went to a page called Twitter, or you went to a page called Bootstrap.
And you can also navigate backwards in this navigation. So if you go, say, the Bootstrap link here. You'll find a list of all the Bootstrap courses that are currently available in the lynda.com library. So that is the purpose of breadcrumbs and what they do, they sort of navigate you up and down the website's hierarchy. To create a breadcrumb in Bootstrap it's relatively straight forward, if you go to your exercise files folder and if you copy that. HTML file into your Bootstrap file and open it up here inside of Sublime Text 2, you will see that I have added some markup here, starting around line 29.
And you'll see here that this is an ordered list. Not an unordered list, but an ordered list. Remember, ordered lists indicate that the order of the items matters. Which, in the case of a breadcrumb, that's absolutely true. You got to this particular page by, in this case, going from the home page to the services page to the vaccinations area. So if we right click anywhere on this page, and say, open in browser. You'll see that we start off with just a list of these ordered links up here on the top of our web page. So, that's the basic markup that we need to make this happen.
So, what we're going to do here then, is inside of these bullets then, is we just need to add Bootstrap special classes. So inside of the OL, we can add a class of breadcrumb. And then we want to indicate where we are in the heirarchy. So one of the things that you're going to see in a lot of places in Bootstrap's navigational systems is on the li, for where you are in the navigation. In this case, vaccinations. You're going to add a class of active. That's a fairly standard sort of class.
You'll see that a lot. So if you just go ahead and save this page, and you take a look at it again in your web browser, this will format so beautifully into this lovely breadcrumb that goes here across your page. Now, the next question that I always get when I'm teaching Bootstrap is, okay, so where do those little slash marks there come from? Well, that's actually part of the CSS. As you saw inside of the list itself, there is no character for a separator between these breadcrumb kind of links. But maybe you might might want to include one, and if that is the case, you can certainly do that.
For example, maybe you want to put a glyphicon in between each one of these items in your breadcrumb chain, maybe an arrow or something, instead of having the slash mark in between them. So, how would you figure out how to. Style this accordingly. So to track down how exactly we go about changing that character in between breadcrumbs. Best way to do this always is to start by going to the Bootstrap website and taking a look at the documentation. This'll be under Components. And this will be under the breadcrumbs link right here.
So here is breadcrumbs, and its hierarchy, and so forth. And you'll see here that there's this note that separators are automatically added in CSS, through colon before and content. Okay. So this is giving us a little bit of a hint here. We know that Bootstrap, when they write their various styles and so forth. It's going to be associated with something having to do with breadcrumb. So what I'd suggest that you do to track this down is to open up Bootstrap.css, this is the human readable format of the style sheet that we've been working with.
And if you do a find here, what we're going to type in. Is, we're going to try to find, something with dot breadcrumb. So if you just type in dot bread here, this should pull you down to the part of the style sheet that starts to talk about breadcrumbs. And then you'll notice here in line 4623, here's the style that says breadcrumb li and li:before. And remember I just mentioned something about that colon before and something about content. Well that's what this style here is responsible for.
It's responsible for that character in between each of those items on the breadcrumb. So, what you can do here is just copy that particular style, I'm just going to go ahead and highlight that whole style. And copy it, then I'm going to open up my custom style sheet, and down here towards the bottom, I'm just going to paste that on in, and then I'm going to make a change to the content part of this. And, I'm going to change the content to none, as in don't have any content. And the padding and color, if you want to change those you can. I'm just going to get rid of those.
It's just extra code. Go ahead and save that style sheet. And when you take a look at your web page again, you'll see that our breadcrumb has no separators in between. That's because we set content to none. Now what we can do is, in our HTML here, we can put in our own characters in between these. The best way to do that is, just after Home, before the li, I'll put in a span, a class of glyphicon. Glyphion-circle-arrow-right slash span.
And that little character then I'm going to copy and I'm going to put it here after services as well, so this is going to be responsible for our little arrow with a circle around it points to the right and when I save this, and I take a look at my webpage now. Now, I have these nice little arrows in between each of my breadcrumbs here. And of course, you could now go through and you could restyle the color behind the breadcrumbs. You could change the color of the links. You can do many kinds of things here to make that breadcrumb blend into your web page a little bit better.
So, that's a little bit about breadcrumbs. It's really, really easy to set them up out of the box. And if you want to change the separators, that's not so hard either.
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.