Bootstrap Breadcrumbs

Breadcrumbs are a navigation aid that displays the user's current location within a website or application hierarchy. Bootstrap provides a simple and flexible way to implement breadcrumbs using built-in classes. Here's how to create breadcrumbs with Bootstrap:

1. Basic Breadcrumbs

To create basic breadcrumbs, use the breadcrumb class along with list items for each breadcrumb item:

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

The breadcrumb-item class represents each individual breadcrumb item. Use the active class for the last breadcrumb item to indicate the current page.

2. Breadcrumb Separator

You can customize the separator between breadcrumb items by adding text or icons between list items:

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

In this example, the separator between breadcrumb items is the greater than symbol (>).

3. Breadcrumb Alignment

You can align breadcrumbs to the left, center, or right of their container by adding corresponding utility classes:

Left Alignment: Add justify-content-start class to the breadcrumb list.
Center Alignment: Add justify-content-center class to the breadcrumb list.
Right Alignment: Add justify-content-end class to the breadcrumb list.

4. Customizing Breadcrumbs

You can customize breadcrumbs further by adding additional styling, such as background colors or borders, to the breadcrumb items or the entire breadcrumb component.

Conclusion

Bootstrap provides a simple and flexible way to implement breadcrumbs in your web projects. By following these guidelines and examples, you can create breadcrumbs that enhance navigation and improve the user experience of your website or application.

Archive