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 thebreadcrumb
list. - Center Alignment: Add
justify-content-center
class to thebreadcrumb
list. - Right Alignment: Add
justify-content-end
class to thebreadcrumb
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.
Comments
Post a Comment