Bootstrap 4 Breadcrumbs indicates the current page location in the form of navigational hierarchy that automatically adds separators via CSS ::before pseduclass.

Example 1: Bootstrap Breadcrumbs with one option

<nav aria-label="breadcrumb">
   <ol class="breadcrumb">
      <li class="breadcrumb-item active" aria-current="page">Home</li>
   </ol>
</nav>

Example 2: Bootstrap Breadcrumbs with two options

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

Example 3: Bootstrap Breadcrumbs with three options

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