JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy
  • Contact Us

Bootstrap Breadcrumbs

June 25, 2014 by Sutha Kaliannan Leave a Comment

A breadcrumb is navigation feature which reveals the users navigation path in a website or web application. Breadcrumbs typically appear horizontally near the top of a webpage. We use breadcrumb navigation for large web sites that have hierarchically arranged pages.

A web site breaks the site into links of categories and sub categories which allows major categories of information to be linked in sequential order. Breadcrumb navigation is displayed to the user, so that they can easily see exactly where that web page is located within the web site. Breadcrumbs provide links to each previous page that navigates through in order to get to the current page.

We can create breadcrumb by using the class .breadcrumb with an unordered list in Bootstrap.

also read:

  • Bootstrap Setup
  • Bootstrap Typography

The below example shows the technique used for implementing the breadcrumbs in Bootstrap. If you have any questions about bootstrap breadcrumbs, please write it in the comments section.

Bootstrap Breadcrumbs Example

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Breakcrumbs Example</h2>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li class="active">Services</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Sign In</a></li>
</ul>
</div>
</body>
</html>
[/code]

The above script uses the class .breadcrumb for creating breadcrumbs in a web site or web application. After executing the script, we will see separator added automatically before the content. Separators are automatically added in CSS through :before and content.

  • Run Bootstrap Breadcrumbs Demo

Bootstrap Breadcrumbs Example

Filed Under: Bootstrap Tagged With: Bootstrap Components

About Sutha Kaliannan

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved