Bootstrap 4 Breadcrumb

Bootstrap 4 breadcrumb markup uses an ordered list with breadcrumb and breadcrumb-item.

Basic Breadcrumb Top ↑

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">jQuery</a></li>
    <li class="breadcrumb-item active" aria-current="page">Breadcrumb Demo</li>
  </ol>
</nav>

Custom Styling Top ↑

.breadcrumb {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
}

Original breadcrumb style generator/demo →

Original Source Examples Retained for Migration Reference Top ↑

Original example 1

<ol class='breadcrumb'>
  <li class='breadcrumb-item'><a href='#'>Home</a></li>
  <li class='breadcrumb-item'><a href='#'>JQuery</a></li>
  <li class='breadcrumb-item active'>Breadcrumb Demo</li>
</ol>

Original example 2

<ol class='breadcrumb'>
  <a href='#' class='breadcrumb-item'>Home</a></li>
  <a href='#' class='breadcrumb-item'>JQuery</a>
  <span class='breadcrumb-item'>Breadcrumb Demo</span>
</ol>

Original example 3

<style>
ol.breadcrumb {
 background: #ffff00;
 color: #0000ff;
 font-size: 16px;
 width: 700;
 height: 60;
 border: 3px solid;
 border-color: #ff0000;
 border-radius: 10px;
}
</style>

Additional Original Learning Routes Top ↑

• bs4-alert.php

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: