Bootstrap 3 - SPLessons

Bootstrap Breadcrumb

Chapter 26

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Bootstrap Breadcrumb

Bootstrap Breadcrumb

shape Description

A Bootstrap Breadcrumb is similar to the pagination element used to make website navigation easier and specifies the current page location to the user. The class .breadcrumb can be used for breadcrumb navigation.

shape Examples

In the below example, the breadcrumb navigation has been given in <ul> element and the current page is “Vacation”, which was decided by making the <ul> elements <li> as active.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Breadcrumbs</h2>
  <p>The .breadcrumb class indicates the current page location within a navigational hierarchy:</p>                  
  <ul class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Private</a></li>
    <li><a href="#">Pictures</a></li>
    <li class="active">Vacation</li>        
  </ul>
</div>

</body>
</html>

Output:

Summary

shape Key Points

  • Bootstrap Breadcrumb makes the page navigation easy.
  • To show the current page, the class .active has to be used.