Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Bootstrap breadcrumbs show where a page sits in a site’s hierarchy. Add a labeled <nav>, an ordered list using Bootstrap’s breadcrumb classes, links for ancestor pages, and aria-current="page" on the current page. The example below follows the official Bootstrap v5.3 structure; change its labels and URLs to match your site.
How do I add breadcrumbs in Bootstrap?
Bootstrap supplies the breadcrumb styling, but your page still needs the markup and real site routes. This example uses the v5.3 component structure:
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item"><a href="/library">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Current page</li>
</ol>
</nav>Replace /library and the example labels with destinations and names from your site. Ancestors are links; the final item identifies the page currently being viewed. Breadcrumbs communicate position in a hierarchy, so they complement rather than replace primary site navigation. Bootstrap v5.3 breadcrumb documentation
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →How should breadcrumb markup identify the current page?
Place the breadcrumb list inside a <nav> landmark and give the landmark a meaningful label. Bootstrap’s example uses aria-label="breadcrumb". Mark the last item with aria-current="page" so assistive technology can identify it as the current location. The final item’s visible active state and its current-page accessibility state should refer to the same page.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Bootstrap permits an ordered or unordered list. The ordered list above makes the sequence explicit; use the list structure consistently with your site’s conventions. Bootstrap applies separators through CSS rather than requiring separator characters between list items.
How do I change the Bootstrap breadcrumb separator?
In Bootstrap v5.3, the default separator is a slash. For a local change without recompiling Sass, set the documented CSS custom property on the breadcrumb:
<ol class="breadcrumb" style="--bs-breadcrumb-divider: '>'">
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Current page</li>
</ol>You can instead define the property in a stylesheet for the component or scope you want to change:
.breadcrumb {
--bs-breadcrumb-divider: '>';
}If your project builds Bootstrap from Sass and needs a theme-level setting, change the $breadcrumb-divider variable before compiling. Use the CSS custom property for a focused adjustment; Sass is appropriate when Bootstrap is already managed through a Sass build and you want the compiled theme to carry the setting. Bootstrap documents text separators, SVG separators, and removing the divider. When placing SVG data in the property, reserved characters must be escaped or URL-encoded; the Sass example uses escape-svg(). Bootstrap v5.3 customization examples
Rank #3
Which Bootstrap version should I use?
Copy examples that match the Bootstrap CSS version actually loaded by your project. The v5.3 component page documents the CSS custom property and the markup used here; the v4.0 page is documentation for an older version. Do not combine a customization instruction from one version with another version’s CSS without checking compatibility. Bootstrap v4.0 breadcrumb documentation
Bootstrap’s v5 migration notes describe a simplified default breadcrumb appearance: padding, background color, and border radius were removed. They also document the divider custom property as a way to change the separator without recompiling CSS. Bootstrap v5 migration notes
Quick Recap
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
