Bootstrap 3 Breadcrumbs (Up. to Bootstrap 4 Breadcrumbs)

Breadcrumbs are important part of website navigation and they are fundamental part of the layout as their need to define the navigational hierarchy on each page respectively. This comes useful when there are thousands of pages running simultaneously on website, bootstrap breadcrumb then precisely position current page hierarchy as per the viewing of the user.

Default Bootstrap Breadcrumb Navigation View

In this post we will study complete behavior on Bootstrap Breadcrumb with examples

Making Breadcrumbs Navigation in Bootstrap

Bootstrap 4 Updated

Breadcrumbs represents the navigational hierarchy within website for showing the page location. These are helpful in accessing the websites that have large number of pages inside it. Starting from higher category to lower and the current page itself makes the Bootstrap navigation.

Bootstrap 4 Breadcrumb Example

In their latest addition .breadcrumbs-item are added to the breadcrumb class which are then have specific CSS attribute being added to them. Here is quick example and code that explains their web layout presentation.

<nav aria-label="breadcrumb">
<ul class="breadcrumb">
    <li class="breadcrumb-item"><a href="http://www.tutorialmines.net">Home</a></li>
    <li class="breadcrumb-item"><a href="http://www.tutorialmines.net/bootstrap-3-tutorial/">Bootstrap 4 Tutorials</a></li>
    <li class="breadcrumb-item active" aria-current="page">Bootstrap 4 Breadcrumbs</li>
</ul>
</nav>

Bootstrap 3 Breadcrumb Example

For making breadcrumbs in the web layout you need to add this specific class .breadcrumb on the unordered lists that will impart default breadcrumbs design to the structure accordingly.

  <h2>Default Bootstrap Breadcrumb Navigation</h2>
    <ul class="breadcrumb">
        <li><a href="http://www.tutorialmines.net">Home</a></li>
        <li><a href="http://www.tutorialmines.net/javascript-tutorials/">JavaScript Tutorials</a></li>
        <li><a href="http://www.tutorialmines.net/bootstrap-3-tutorial/">Bootstrap 3 Tutorials</a></li>
        <li class="active">Bootstrap 3 Breadcrumbs</li>
    </ul>

Bootstrap Breadcrumb CSS

Below given CSS specification are default breadcrumbs CSS in Bootstrap 3 and you can easily customize them to match your particular requirements.

.breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}

In latest Bootstrap 4 Breadcrumbs CSS have been further enhanced with following specifications that include specific values for .breadcrumb-item

.breadcrumb
{display:-ms-flexbox;display:flex;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
padding:.75rem 1rem;
margin-bottom:1rem;
list-style:none;
background-color:#e9ecef;
border-radius:.25rem}
.breadcrumb-item+.breadcrumb-item{padding-left:.5rem}
.breadcrumb-item+.breadcrumb-item::before{display:inline-block;padding-right:.5rem;color:#6c757d;content:"/"}
.breadcrumb-item+.breadcrumb-item:hover::before{text-decoration:underline}
.breadcrumb-item+.breadcrumb-item:hover::before{text-decoration:none}
.breadcrumb-item.active{color:#6c757d}

Bootstrap Breadcrumb Separator

Default Separator behaviour is given by below CSS3 specification and you can customize to add whatever design with simply replacing the content value.

.breadcrumb > li + li:before {
  content: "/\00a0";
  padding: 0 5px;
  color: #ccc;
}

Bootstrap 4 Breadcrumbs Separator: With SASS Script being introduced in Bootstrap 4 separator can be customized by changing values of $breadcrumb-divider. Quote function can be used to make things better accordingly. Separators can be removed by adding $breadcrumb-divider to none.

Bootstrap Breadcrumb Separator Font Awesome:
You can use Font Awesome font by adding URL and specific CSS to get the desired effect. Here is quick example of its CSS and try it editor example.

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

.breadcrumb-item + .breadcrumb-item::before 
{
    font-family: 'fontAwesome';
    content: "\f101" !important; 
}

Now we will discuss various issues that we face while doing practical web layout with Bootstrap Breadcrumbs.

Bootstrap breadcrumb Width (Full Screen)

Breadcrumbs take width by size of their content and there is not specific defined value of width. But you can customize them to match your web layout accordingly by adding custom CSS values to get the desired width.
Here we have used button group with breadcrumbs and used Display:flex property to get the full screen of the container respectively(100% responsive). In next section we are going to get more info on making them responsive.

.btn-group{
  display: flex;
}

How to Make Bootstrap Breadcrumb Navigation Responsive

To make Bootstrap Breadcrumb responsive Simply, you can adjust width of the main breadcrumb element to be 100% that will make the whole design become responsive by default. We will also use simple structure with some JS that will impart ellipsis behavior to the long breadcrumb content.

Handling Bootstrap Large Breadcrumbs: You can use specific CSS and JS to control large breadcrumbs that will change behavior as the screen size changes.

/* Breadcrumbs responsive CSS for Ellipsis*/
.btn-breadcrumb > * > div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
}

.btn-breadcrumb > *:nth-child(n+2) {
  display:none;
}

Bootstrap 3 Breadcrumb Background Color

For changing the background color you can do that by changing the new values in the current CSS file or replacing with new important attribute although later one is recommended.

Bootstrap 3 Breadcrumb Separator Color

You need to add specific color CSS to make desired changes in the separator color in Bootstrap 3 Breadcrumbs respectively.

Bootstrap 3 Breadcrumb Arrow

One can also use designer arrows that looks beautiful while displaying the navigation system of the website. Here we have built design by using default button behaviour.

Bootstrap 3 Breadcrumb Styles Example

With Left Arrow
In this bootstrap separator is left arrow ‘→’ along with ‘red’ color which has been replaced to make changes accordingly.

Bootstrap Breadcrumb Button Styles Examples

Also checkout Bootstrap Breadcrumb button to add in to your layout wherever necessary

Bootstrap Breadcrumbs Dynamic

To make breadcrumbs appear dynamically you need to add specific code that will generate dynamic breadcrumbs in the layout.

Also Check out Bootstrap Interview Questions to get your preparation ready for precise candidate.

Read complete Bootstrap 3 Tutorials now with step by step expert guidance!