Bootstrap 4 Breadcrumbs

In this article, we will learn the bootstrap 4 breadcrumbs working examples in detail.

What is Bootstrap Breadcrumbs?

In bootstrap 4, Breadcrumbs is a secondary navigation system that shows a user's location in a website.

Following are the various examples of bootstrap 4 breadcrumbs.

Example 1:

<! DOCTYPE html>          
<html lang = "en">          
<head>          
  <title> Bootstrap 4 breadcrumbs Example </title>          
  <meta charset = "utf-8">          
  <meta name = "viewport" content="width=device-width, initial-scale=1">          
  <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity = "sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin = "anonymous">
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>          
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>          
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script>          
   <link href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet">          
</head>          
<style>    
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@900&display=swap");  
.heading h1 {  
  text-align: center;  
  color: #222;   
  font-size: 40px;   
  font-weight: 200;  
  text-transform: uppercase;  
  word-spacing: 1px;   
  letter-spacing: 2px;   
  color: black;  
  margin: 10px;  
  font-family: "Rubik", sans-serif;  
}  
heading h1:before {  
  position: absolute;  
  left: 0;  
  bottom: 0;  
  width: 42px;  
  height: 4px;  
  content: " ";  
  right: 45px;   
  margin: auto;  
  background-color: #ccc;  
}  
.heading h1:before {   
background-color: #d78b8b;  
  left: 45px;   
  width: 90px;  
}  
.hm-gradient {
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}
.darken-grey-text {
    color: #2E2E2E;
}
.bc-icons .breadcrumb-item + .breadcrumb-item::before {
    content: none; }
.bc-icons .breadcrumb-item.active {
    color: blue; }
.bc-icons-2 .breadcrumb-item + .breadcrumb-item::before {
    content: none; } 
.bc-icons-2 .breadcrumb-item.active {
     color: blue; 	 } 
.light-font .breadcrumb-item + .breadcrumb-item::before {
    color: red; }
.light-font .breadcrumb-item.active {
     color: blue; }
.dark-font .breadcrumb-item + .breadcrumb-item::before {
    color: red; }
.dark-font .breadcrumb-item.active {
    color: #455a64; }
</style>
<body>
<body class = "hm-gradient">
    <main>
        <div class = "container mt-4">
            <div class = "text-center darken-grey-text mb-4">
                <h1 class = "heading"> Bootstrap 4 Breadcrumbs Example 1  </h1>
                            </div>
                        <div class = "row">
                <div class = "col-md-12">
                    <div class = "card p-3">
                        <div class = "card-block">
                          <div class = "light-font">
                                <ol class = "breadcrumb secondary-color">
                                    <li class = "breadcrumb-item"> <a class = "white-text" href = "#"> Home </a> </li>
                                    <li class = "breadcrumb-item"> <a class = "white-text" href = "#"> About </a> </li>
                                    <li class = "breadcrumb-item active"> Gallery </li>
                                </ol>
                            </div>
			<hr class = "my-4">
                            <div class = "bc-icons pb-4">
                                <ol class = "breadcrumb red darken-4">
                                    <li class = "breadcrumb-item"> <i class = "fa fa-star-o mr-2 white-text" aria-hidden = "true"> </i> <a class = "white-text" href = "#"> Home </a> </li>
                                    <li class = "breadcrumb-item"> <i class = "fa fa-star-o mx-2 white-text" aria-hidden = "true"> </i> <a class = "white-text" href = "#"> About </a> </li>
                                    <li class = "breadcrumb-item active"> <i class = "fa fa-star-o mx-2 white-text" aria-hidden = "true"> </i> Gallery </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                   </div>                          
            </div>
        </div>
          </main>
  </body>
</html>

Explanation:

In the above example, we have created an example of bootstrap 4 breadcrumbs.

Output:

Following is the output of this example.

Example 2

<! DOCTYPE html>          
<html lang = "en">          
<head>          
  <title> Bootstrap 4 breadcrumbs Example </title>          
  <meta charset = "utf-8">          
  <meta name = "viewport" content="width=device-width, initial-scale=1">          
  <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity = "sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin = "anonymous">
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>          
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>          
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script>          
   <link href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet">          
</head>          
<style>    
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@900&display=swap");  
.heading h1 {  
  text-align: center;  
  color: #222;   
  font-size: 40px;   
  font-weight: 200;  
  text-transform: uppercase;  
  word-spacing: 1px;   
  letter-spacing: 2px;   
  color: black;  
  margin: 10px;  
  font-family: "Rubik", sans-serif;  
}  
.heading h1 span {  
  line-height: 2em;   
  padding-bottom: 5px;  
  text-transform: none;  
  font-size: .7em;  
  margin: 10px;  
  font-weight: normal;  
  font-style: italic;   
  font-family: "Rubik", sans-serif;  
  color: #999;   
 letter-spacing: -0.005em;   
  word-spacing: 1px;  
}  
.heading h1:after {  
  position: absolute;  
  left: 0;  
  bottom: 0;  
  width: 42px;  
  height: 4px;  
  content: " ";  
  right: 45px;   
  margin: auto;  
  background-color: #ccc;  
}  
heading h1:before {  
  position: absolute;  
  left: 0;  
  bottom: 0;  
  width: 42px;  
  height: 4px;  
  content: " ";  
  right: 45px;   
  margin: auto;  
  background-color: #ccc;  
}  
.heading h1:before {   
background-color: #d78b8b;  
  left: 45px;   
  width: 90px;  
}  
.hm-gradient {
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}
.darken-grey-text {
    color: red;
}
a {
    color: #6652a1;
    text-decoration: none;
	font-family: "Avenir Next", Calibri, Verdana, sans-serif;
	font-weight: bold;
	}
	a:hover {
    color: #720e6f;
    text-decoration: none;
	font-family: "Avenir Next", Calibri, Verdana, sans-serif;
	font-weight: bold;
	}
.bc-icons .breadcrumb-item + .breadcrumb-item::before {
    content: none; }
.bc-icons .breadcrumb-item.active {
    color: red; }
.bc-icons-2 .breadcrumb-item + .breadcrumb-item::before {
    content: none; } 
.bc-icons-2 .breadcrumb-item.active {
     color: Green; 	 } 
.light-font .breadcrumb-item + .breadcrumb-item::before {
    color: red;
	}
.light-font .breadcrumb-item.active {
     color: blue; }
.dark-font .breadcrumb-item + .breadcrumb-item::before {
    color: red; }
.dark-font .breadcrumb-item.active {
    color: red; }
</style>
<body>
<body class = "hm-gradient">
    <main>
        <div class = "container mt-4">
            <div class = "text-center darken-grey-text mb-4">
                <h1 class = "heading">  Bootstrap 4 Breadcrumbs Example 2  </h1>
                            </div>
                        <div class = "row">
                <div class = "col-md-12">
                    <div class = "card p-3">
                       <div class = "card-block">
                          <hr class = "my-4">
                            <div class = "bc-icons-2">
                                <ol class = "breadcrumb indigo lighten-4">
                                    <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Home </a> <i class = "fa fa-caret-right mx-2" aria-hidden = "true"> </i> </li>
                                    <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> About </a> <i class = "fa fa-caret-right mx-2" aria-hidden = "true"> </i> </li>
									<li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Contact Us </a> <i class = "fa fa-caret-right mx-2" aria-hidden = "true"> </i> </li>
									<li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Services </a> <i class = "fa fa-caret-right mx-2" aria-hidden = "true"> </i> </li>
                                    <li class = "breadcrumb-item active"> Gallery </li>
                                </ol>
								<hr class = "my-4">
								<ol class = "breadcrumb indigo lighten-4">
                                    <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Home </a> <i class = "fa fa-caret-left mx-2" aria-hidden = "true"> </i> </li>
                                    <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> About </a> <i class = "fa fa-caret-left mx-2" aria-hidden = "true"> </i> </li>
									<li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Contact Us </a> <i class = "fa fa-caret-left mx-2" aria-hidden = "true"> </i> </li>
									<li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Services </a> <i class = "fa fa-caret-leftt mx-2" aria-hidden = "true"> </i> </li>
                                    <li class = "breadcrumb-item active"> Gallery </li>
                                </ol>
								
                            </div>                                
                        </div>
                    </div>
                            </div>            
            </div>
        </div>
          </main>
  </body>
</html>

Explanation:

In the above example, we have created an example of bootstrap 4 breadcrumbs.

Output:

Following is the output of this example.

Example 3

<! DOCTYPE html>
<html>
<head>
  <title> Bootstrap 4 breadcrumbs Example </title>          
  <meta charset = "utf-8">          
  <meta name = "viewport" content="width=device-width, initial-scale=1">          
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>          
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>          
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script>          

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<style>
 h1 {  
  text-align: center;  
  color: #222;   
  font-size: 40px;   
  font-weight: 200;  
  text-transform: uppercase;  
  word-spacing: 1px;   
  letter-spacing: 2px;   
  color: black;  
  margin: 30px;  
  font-family: "Rubik", sans-serif;  
}  
.arr-bread {
    height: 36px;
    padding: 0;
    line-height: 36px;
    list-style: none;
    background-color: #D5DAE1
}

.arr-bread li {
    display: inline-block;
    vertical-align: top
}
.arr-bread li a {
    display: inline-block;
    vertical-align: top
}
.arr-bread li span {
    display: inline-block;
    vertical-align: top
}
.arr-bread li:not(:first-child) {
    margin-left: 0px
}
.arr-bread li+li:before {
    padding: 0;
    content: ""
}
.arr-bread li span {
    padding: 0 10px
}
.arr-bread li a {
    height: 36px;
    padding: 0 10px 0 25px;
    line-height: 36px
}
.arr-bread li:not(:first-child) span {
    height: 36px;
    padding: 0 10px 0 25px;
    line-height: 36px
}
.arr-bread li:first-child a {
    padding: 0 10px
}
.arr-bread li a {
    position: relative;
    color: #fff;
    text-decoration: none;
    background-color: #DC3545;
    border: 1px solid #FFFF00
}
.arr-bread li:first-child a {
    padding-left: 10px
}
.arr-bread li a:after {
    position: absolute;
    top: -1px;
    width: 0;
    height: 0;
    content: '';
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent
}
.arr-bread li a:before {
    position: absolute;
    top: -1px;
    width: 0;
    height: 0;
    content: '';
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent
}
.arr-bread li a:before {
    right: -10px;
    z-index: 3;
    border-left-color: #DF4454;
    border-left-style: solid;
    border-left-width: 11px
}
.arr-bread li a:after {
    right: -11px;
    z-index: 2;
    border-left: 11px solid #FFFF00;
}
.arr-bread li a:focus {
    background-color: #BD2130;
    border: 1px solid #BD2130
}
.arr-bread li a:hover {
    background-color: #BD2130;
    border: 1px solid #BD2130
}
.arr-bread li a:focus:before {
    border-left-color: #BD2130;
}
.arr-bread li a:hover:before {
    border-left-color: #BD2130;
}

.arr-bread li a:active {
    background-color: #2494be;
    border: 1px solid #2494be;
}
.arr-bread li a:active:after {
    border-left-color: #2494be;
}
.arr-bread li a:active:before {
    border-left-color: #2494be;
}
</style>
</head>
<body>
<div class="container">
<h1> Bootstrap 4 Breadcrumbs Example 3 </h1>
<div class="container">
    <ol class="breadcrumb arr-bread">
		<li> <a href = "#"> Home </a> </li>
		<li> <a href = "#"> About </a> </li>
		<li> <a href = "#"> Contact </a> </li>
        <li class = "active"> <span> Gallery </span> </li>        
	</ol>
</div>
</div>
</body>
</html>

Explanation:

In the above example, we have created an example of bootstrap 4 breadcrumbs.

Output:

Following is the output of this example.

Example 4

<! DOCTYPE html>
<html>
<head>
  <title> Bootstrap 4 breadcrumbs Example </title>          
  <meta charset = "utf-8">          
  <meta name = "viewport" content="width=device-width, initial-scale=1">          
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>          
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>          
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script>          

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<style>
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@900&display=swap");  
 h1 {  
  text-align: center;  
  color: #222;   
  font-size: 40px;   
  font-weight: 200;  
  text-transform: uppercase;  
  word-spacing: 1px;   
  letter-spacing: 2px;   
  color: black;  
  margin: 30px;  
  font-family: "Rubik", sans-serif;  
}  
.hm-gradient {
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}
a {
    color: #720e6f;
    text-decoration: none;
	font-family: "Avenir Next", Calibri, Verdana, sans-serif;
	font-weight: bold;
	}
	a:hover {
    color: #720e6f;
    text-decoration: none;
	font-family: "Avenir Next", Calibri, Verdana, sans-serif;
	font-weight: bold;
	}
.arr-right .breadcrumb-item+.breadcrumb-item::before {
  content: "?";
  vertical-align: top;
  color: #408080;
  font-size: 35px;
  line-height: 18px;
}
</style>
</head>
<body>
<div class = "container">
  <h1> Bootstrap 4 Breadcrumbs Example 4 </h1>
<nav aria-label = "breadcrumb">
  <ol class = "breadcrumb arr-right">
    <li class = "breadcrumb-item"> <a href = "#"> Home </a> </li>
    <li class = "breadcrumb-item"> <a href = "#"> Gallery </a> </li>
    <li class = "breadcrumb-item active" aria-current = "page"> Product Page </li>
  </ol>
</nav>

<nav aria-label = "breadcrumb ">
  <ol class = "breadcrumb arr-right bg-dark ">
    <li class = "breadcrumb-item"> <a href = "#" class = "text-light">  Home </a> </li>
        <li class = "breadcrumb-item"> <a href = "#" class = "text-light"> Gallery </a> </li>
    <li class = "breadcrumb-item text-light active" aria-current = "page"> Product Page </li>
  </ol>
</nav>

<nav aria-label = "breadcrumb">
  <ol class = "breadcrumb arr-right bg-warning ">
    <li class = "breadcrumb-item"> <a href = "#" class = "text-light">  Home </a> </li>
        <li class = "breadcrumb-item"> <a href = "#" class = "text-light"> Electronics Gadgets  </a> </li>
    <li class = "breadcrumb-item text-light active" aria-current = "page"> Brands </li>
  </ol>
</nav>
<nav aria-label = "breadcrumb">
  <ol class = "breadcrumb arr-right bg-info ">
        <li class = "breadcrumb-item"> <a href = "#" class = "text-dark"> Home </a> </li>
    <li class = "breadcrumb-item"> <a href = "#" class = "text-dark"> Gallery </a> </li>
    <li class = "breadcrumb-item text-dark active" aria-current = "page"> Product Page </li>
  </ol>
</nav>
</div>
</body>
</html>

Explanation:

In the above example, we have created an example of bootstrap 4 breadcrumbs.

Output:

Following is the output of this example.

Example 5

<! DOCTYPE html>          
<html lang = "en">          
<head>          
  <title> Bootstrap 4 breadcrumbs Example </title>          
  <meta charset = "utf-8">          
  <meta name = "viewport" content="width=device-width, initial-scale=1">          
  <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity = "sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin = "anonymous">
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>          
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>          
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script>          
   <link href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet">          
</head>          
<style>    
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@900&display=swap");  
h1 {  
  text-align: center;  
  color: #222;   
  font-size: 40px;   
  font-weight: 200;  
  text-transform: uppercase;  
  word-spacing: 1px;   
  letter-spacing: 2px;   
  color: black;  
  margin: 10px;  
  font-family: "Rubik", sans-serif;  
}  
heading h1:before {  
  position: absolute;  
  left: 0;  
  bottom: 0;  
  width: 42px;  
  height: 4px;  
  content: " ";  
  right: 45px;   
  margin: auto;  
  background-color: #ccc;  
}  
.heading h1:before {   
background-color: #d78b8b;  
  left: 45px;   
  width: 90px;  
}  
.hm-gradient {
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}
.darken-grey-text {
    color: red;
}
a {
    color: #720e6f;
    text-decoration: none;
	font-family: "Avenir Next", Calibri, Verdana, sans-serif;
	font-weight: bold;
	}
	a:hover {
    color: #720e6f;
    text-decoration: none;
	font-family: "Avenir Next", Calibri, Verdana, sans-serif;
	font-weight: bold;
	}
.bc-icons .breadcrumb-item + .breadcrumb-item::before {
    content: none; }
.bc-icons .breadcrumb-item.active {
    color: red; }
.bc-icons-2 .breadcrumb-item + .breadcrumb-item::before {
    content: none; } 
.bc-icons-2 .breadcrumb-item.active {
     color: Green; 	 } 
.light-font .breadcrumb-item + .breadcrumb-item::before {
    color: red;
	}
.light-font .breadcrumb-item.active {
     color: blue; }
.dark-font .breadcrumb-item + .breadcrumb-item::before {
    color: red; }
.dark-font .breadcrumb-item.active {
    color: red; }
</style>
<body>
<body class = "hm-gradient">
    <main>
        <div class = "container mt-4">
            <div class = "text-center darken-grey-text mb-4">
                <h1 class = "heading">  Bootstrap 4 Breadcrumbs Example 5 </h1>
                            </div>
                        <div class = "row">
                <div class = "col-md-12">
                    <div class = "card p-3">
                       <div class = "card-block">
                            <div class = "bc-icons-2">
								<hr class = "my-4">
                                <ol class = "breadcrumb blue-grey lighten-4">
                                    <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Home </a> <i class = "fa fa-angle-double-right mx-2" aria-hidden = "true"> </i> </li>
                          <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> About </a> <i class = "fa fa-angle-double-right mx-2" aria-hidden = "true"> </i> </li>
						  <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Services </a> <i class = "fa fa-angle-double-right mx-2" aria-hidden = "true"> </i> </li>
						  <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Contact </a> <i class = "fa fa-angle-double-right mx-2" aria-hidden = "true"> </i> </li>
            <li class = "breadcrumb-item active"> Gallery </li>
                                </ol>
								
								<hr class = "my-4">
                                <ol class = "breadcrumb red lighten-4">
                                    <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Home </a> <i class = "fa fa-angle-double-left mx-2" aria-hidden = "true"> </i> </li>
                                    <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> About </a> <i class = "fa fa-angle-double-left mx-2" aria-hidden = "true"> </i> </li>
									<li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Services </a> <i class = "fa fa-angle-double-right mx-2" aria-hidden = "true"> </i> </li>
									<li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Contact </a> <i class = "fa fa-angle-double-right mx-2" aria-hidden = "true"> </i> </li>
                                    <li class = "breadcrumb-item active"> Gallery </li>
                                </ol>
								
                            </div>                                
                        </div>
                    </div>
                            </div>            
            </div>
        </div>
          </main>
  </body>
</html>

Explanation:

In the above example, we have created an example of bootstrap 4 breadcrumbs.

Output:

Following is the output of this example.

Example 6

<! DOCTYPE html>          
<html lang = "en">          
<head>          
  <title> Bootstrap 4 breadcrumbs Example </title>          
  <meta charset = "utf-8">          
  <meta name = "viewport" content = "width=device-width, initial-scale = 1">          
  <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity = "sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin = "anonymous">
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>          
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>          
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script>          
   <link href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet">          
</head>          
<style>    
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@900&display=swap");  
h1 {  
  text-align: center;  
  color: #222;   
  font-size: 30px;   
  font-weight: 200;  
  text-transform: uppercase;  
  word-spacing: 1px;   
  letter-spacing: 2px;   
  color: black;  
  margin: 20px;  
  font-family: "Rubik", sans-serif;  
}  
.heading h1 span {  
  line-height: 2em;   
  padding-bottom: 5px;  
  text-transform: none;  
  font-size: .7em;  
  margin: 10px;  
  font-weight: normal;  
  font-style: italic;   
  font-family: "Rubik", sans-serif;  
  color: #999;   
 letter-spacing: -0.005em;   
  word-spacing: 1px;  
}  
.heading h1:after {  
  position: absolute;  
  left: 0;  
  bottom: 0;  
  width: 42px;  
  height: 4px;  
  content: " ";  
  right: 45px;   
  margin: auto;  
  background-color: #ccc;  
}  
 
.hm-gradient {
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}
.darken-grey-text {
    color: red;
}
a {
    color: #720e6f;
    text-decoration: none;
	font-family: "Avenir Next", Calibri, Verdana, sans-serif;
	font-weight: bold;
	}
	a:hover {
    color: #720e6f;
    text-decoration: none;
	font-family: "Avenir Next", Calibri, Verdana, sans-serif;
	font-weight: bold;
	}
.bc-icons .breadcrumb-item + .breadcrumb-item::before {
    content: none; }
.bc-icons .breadcrumb-item.active {
    color: red; }
.bc-icons-2 .breadcrumb-item + .breadcrumb-item::before {
    content: none; } 
.bc-icons-2 .breadcrumb-item.active {
     color: Green; 	 } 
.light-font .breadcrumb-item + .breadcrumb-item::before {
    color: red;
	}
.light-font .breadcrumb-item.active {
     color: blue; }
.dark-font .breadcrumb-item + .breadcrumb-item::before {
    color: red; }
.dark-font .breadcrumb-item.active {
    color: red; }
</style>
<body>
<body class = "hm-gradient">
    <main>
        <div class = "container mt-4">
            <div class = "text-center darken-grey-text mb-4">
                <h1 class = "heading">  Bootstrap 4 Breadcrumbs Example 6  </h1>
                            </div>
                        <div class = "row">
                <div class = "col-md-12">
                    <div class = "card p-3">
                       <div class = "card-block">
                          <hr class = "my-4">
                            <div class = "bc-icons-2">                              
                               <ol class = "breadcrumb purple lighten-4">
                                    <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Home </a> <i class = "fa fa-angle-right mx-2" aria-hidden = "true"> </i> </li>
                                    <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> About </a> <i class = "fa fa-angle-right mx-2" aria-hidden = "true"> </i> </li>
									 <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Contact </a> <i class = "fa fa-angle-right mx-2" aria-hidden = "true"> </i> </li>
									  <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Services </a> <i class = "fa fa-angle-right mx-2" aria-hidden = "true"> </i> </li>
                                    <li class = "breadcrumb-item active"> Gallery </li>
                                </ol>
								<hr class = "my-4">
                                <ol class = "breadcrumb cyan lighten-4">
                                    <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Home </a> <i class = "fa fa-angle-left mx-2" aria-hidden = "true"> </i> </li>
                                    <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> About </a> <i class = "fa fa-angle-left mx-2" aria-hidden = "true"> </i> </li>
									 <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Contact </a> <i class = "fa fa-angle-left mx-2" aria-hidden = "true"> </i> </li>
									  <li class = "breadcrumb-item"> <a class = "black-text" href = "#"> Services </a> <i class = "fa fa-angle-left mx-2" aria-hidden = "true"> </i> </li>
                                    <li class = "breadcrumb-item active"> Gallery </li>
                              </ol>
                            </div>                                
                        </div>
                    </div>
                            </div>            
            </div>
        </div>
          </main>
  </body>
</html>

Explanation:

In the above example, we have created an example of bootstrap 4 breadcrumbs.

Output:

Following is the output of this example.