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

Implementing location breadcrumbs

From: Up and Running with Bootstrap 3

Video: Implementing location breadcrumbs

The next aspect of the Bootstrap framework that I will examine is the various methods of creating navigational 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 this next chapter, these systems can be combined with JavaScript to include dropdowns in many cases. So, pills with dropdowns, or tabs with dropdowns, or responsive navigation bars with dropdowns. For now, let's just take a look at breadcrumbs.

Implementing location breadcrumbs

The next aspect of the Bootstrap framework that I will examine is the various methods of creating navigational 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 this next chapter, these systems can be combined with JavaScript to include dropdowns in many cases. So, pills with dropdowns, or tabs with dropdowns, or responsive navigation bars with dropdowns. For now, let's just take a look at breadcrumbs.

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.

Show transcript

This video is part of

Image for Up and Running with Bootstrap 3
Up and Running with Bootstrap 3

37 video lessons · 23783 viewers

Jen Kramer
Author

 
Expand all | Collapse all
  1. 5m 25s
    1. Welcome
      58s
    2. Using the exercise files
      1m 19s
    3. Installing Sublime Text 2
      3m 8s
  2. 29m 0s
    1. What is Bootstrap?
      8m 1s
    2. Downloading and unzipping Bootstrap 3
      4m 31s
    3. Examining Bootstrap file structure
      4m 34s
    4. Adding CSS to a Bootstrap HTML file
      4m 35s
    5. Adding JavaScript to a Bootstrap HTML file
      7m 19s
  3. 44m 38s
    1. Exploring Bootstrap's grid system
      9m 10s
    2. Creating new rows and cells
      14m 5s
    3. Adjusting column widths using offset
      5m 2s
    4. Changing column order using push and pull
      5m 34s
    5. Nesting columns
      3m 43s
    6. Creating a JumboTron-style layout
      3m 41s
    7. Challenge: Working with grids
      1m 31s
    8. Solution: Working with grids
      1m 52s
  4. 53m 34s
    1. Exploring basic typography: The small and blockquote tags
      4m 29s
    2. Exploring Bootstrap's responsive classes including .hidden and .visible
      4m 44s
    3. Styling buttons using btn classes
      4m 43s
    4. Styling images with responsiveness and decorative touches
      5m 22s
    5. Incorporating Bootstrap 3 glyph icons
      3m 28s
    6. Creating a thumbnail gallery
      6m 2s
    7. Styling tabular data
      5m 3s
    8. Overriding core CSS with custom styles
      12m 53s
    9. Challenge: Styling panels and callouts
      2m 17s
    10. Solution: Styling panels and callouts
      4m 33s
  5. 27m 41s
    1. Implementing location breadcrumbs
      6m 38s
    2. Using tabs and pills for navigation
      6m 58s
    3. Developing a responsive navigation bar
      9m 9s
    4. Challenge: Modify the "pancake" button
      1m 3s
    5. Solution: Modify the "pancake" button
      3m 53s
  6. 37m 45s
    1. Implementing dropdowns within a navigation bar
      5m 5s
    2. Tabbing within the same page
      15m 45s
    3. Accordion panels with collapse functionality
      11m 37s
    4. Challenge: Tooltips
      1m 59s
    5. Solution: Tooltips
      3m 19s
  7. 3m 0s
    1. Next steps towards advanced Bootstrap
      3m 0s

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.

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

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