Custom Bootstrap 5 Breadcrumbs -Ver 6
Custom Breadcrumbs for Bootstrap 5 framework
Abstract: We are presenting code (CSS) for custom Bootstrap 5 breadcrumbs. This is an improved version of the previously published article.
1 The need for better Breadcrumbs – ver6
This is a continuation of the article:
• Custom Bootstrap 5 Breadcrumbs -Ver 5
I will not repeat what was explained previously. Just continue to improve the code.
1.1 Problems with Bootstrap Themes
In version 4, I applied some text shadows for better readability of the text. Readability was not that good, so I improved it in this version.
But, that was not good enough for my clients. Text shadows were not liked by my clients. Main problem reported was READABILITY OF TEXT.
I agree with them in principle, the right solution is to do it properly. That means to inherit theme colors all the way and fully.
2 New solution
Here is the new CSS file (breadcrumb3.css) :
/* breadcrumb3.css */
/* by Mark.Pelf@Codeproject.com,
using partly code from Graeme_Grant@codeproject.com */
/* Inherit text-bg-primary text color dynamically from any Bootstrap theme */
.breadcrumb3-lg, .breadcrumb3-md, .breadcrumb3-sm{
/* here I am assigning my CSS variable --_bs-primary
used in this library. First I look if Bootstrap CSS
variable --bs-primary is defined, to get value from it.
If not, then I assign default value #0d6efd */
--_bs-primary: var(--bs-primary,#0d6efd);
/* Dynamic text colors that match text-bg-* classes - automatically detected by JavaScript
Falls back to appropriate colors if JavaScript hasn't run yet or fails */
--_bs-primary-text: var(--_bs-primary-text-dynamic, #fff);
--_bs-primary-text-emphasis: var(--bs-primary-text-emphasis,#052c65);
--_bs-primary-bg-subtle: var(--bs-primary-bg-subtle,#cfe2ff);
--_bs-secondary: var(--bs-secondary,#6c757d);
--_bs-secondary-text: var(--_bs-secondary-text-dynamic, #fff);
--_bs-secondary-text-emphasis: var(--bs-secondary-text-emphasis,#0a3622);
--_bs-secondary-bg-subtle: var(--bs-secondary-bg-subtle,#e2e3e5);
--_bs-success: var(--bs-success,#198754);
--_bs-success-text: var(--_bs-success-text-dynamic, #fff);
--_bs-success-text-emphasis: var(--bs-success-text-emphasis,#0a3622);
--_bs-success-bg-subtle: var(--bs-success-bg-subtle,#d1e7dd);
--_bs-info: var(--bs-info,#0dcaf0);
--_bs-info-text: var(--_bs-info-text-dynamic, #000);
--_bs-info-text-emphasis: var(--bs-info-text-emphasis, #055160);
--_bs-info-bg-subtle: var(--bs-info-bg-subtle,#cff4fc);
--_bs-warning: var(--bs-warning,#ffc107);
--_bs-warning-text: var(--_bs-warning-text-dynamic, #000);
--_bs-warning-text-emphasis: var(--bs-warning-text-emphasis,#664d03);
--_bs-warning-bg-subtle: var(--bs-warning-bg-subtle,#fff3cd);
--_bs-danger: var(--bs-danger,#dc3545);
--_bs-danger-text: var(--_bs-danger-text-dynamic, #fff);
--_bs-danger-text-emphasis: var(--bs-danger-text-emphasis,#58151c);
--_bs-danger-bg-subtle: var(--bs-danger-bg-subtle,#f8d7da);
--_bs-light: var(--bs-light,#f8f9fa);
--_bs-light-text: var(--_bs-light-text-dynamic, #000);
--_bs-light-text-emphasis: var(--bs-light-text-emphasis,#495057);
--_bs-light-bg-subtle: var(--bs-light-bg-subtle,#fcfcfd);
--_bs-dark: var(--bs-dark,#212529);
--_bs-dark-text: var(--_bs-dark-text-dynamic, #fff);
--_bs-dark-text-emphasis: var(--bs-dark-text-emphasis,#495057);
--_bs-dark-bg-subtle: var(--bs-dark-bg-subtle,#ced4da);
--_bs-gray: var(--bs-gray,#6c757d);
--_bs-white: white;
--_bs-black: black;
/* changeable colors */
--_bgcolor: var(--_bs-info);
--_color: var(--_bs-black);
--_bg-subtle: var(--_bs-gray);
--_hover-bgcolor: var(--_bs-primary);
--_hover-color: var(--_bs-primary-text-emphasis);
}
@media (max-width: 767px) {
/* making it responsive, using CSS Flexbox with column (vertical) direction*/
.breadcrumb3-lg, .breadcrumb3-md, .breadcrumb3-sm {
display: flex;
flex-direction: column;
}
.breadcrumb3-lg .breadcrumb3-item {
width: 80% ;
border-radius: 4px 0 0 4px;
padding-left: 25px ;
}
.breadcrumb3-md .breadcrumb3-item {
width: 80% ;
border-radius: 3px 0 0 3px;
padding-left: 20px ;
}
.breadcrumb3-sm .breadcrumb3-item {
width: 80% ;
border-radius: 3px 0 0 3px;
padding-left: 18px ;
}
}
/* large size breadcrumb3-item -----------------------------------*/
.breadcrumb3-item {
position: relative;
display: table-cell;
vertical-align: middle;
color: var(--_color);
background-color: var(--_bgcolor);
height: 40px;
line-height: 18px;
font-size: 18px;
text-align: center;
padding-right: 10px;
padding-left: 25px;
text-decoration: none;
/*text-shadow: -1px -1px 2px var(--_bg-subtle), 0 -1px 2px var(--_bg-subtle), 1px -1px 2px var(--_bg-subtle), 1px 0 2px var(--_bg-subtle), 1px 1px 2px var(--_bg-subtle), 0 1px 2px var(--_bg-subtle), -1px 1px 2px var(--_bg-subtle), -1px 0 2px var(--_bg-subtle);
*/
}
.breadcrumb3-text {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.breadcrumb3-icon {
display: table-cell;
text-align: center;
line-height: 25px;
font-size: 25px;
padding-right: 10px;
vertical-align: middle;
}
.breadcrumb3-item:first-child {
border-radius: 4px 0 0 4px;
padding-left: 15px;
}
.breadcrumb3-item:before,
.breadcrumb3-item:after {
content: "";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
position: absolute;
margin-top: -20px;
border-bottom: 20px solid transparent;
left: 100%;
top: 50%;
}
/* all this to create edge on arrow, creating gray arrow in background */
.breadcrumb3-item:after {
border-left: 15px solid var(--_color);
margin-left: 1px;
z-index: 2;
}
/* this is arrow itself, overwriting gray arrow */
.breadcrumb3-item:before {
border-left: 15px solid var(--_bgcolor);
margin-left: 0px;
z-index: 3;
}
.breadcrumb3-item:hover:not(.no-hover-effect) ,
.breadcrumb3-item:focus:not(.no-hover-effect){
background-color: var(--_hover-bgcolor);
color: var(--_hover-color);
}
.breadcrumb3-item:hover:not(.no-hover-effect):before,
.breadcrumb3-item:focus:not(.no-hover-effect):before {
border-left-color: var(--_hover-bgcolor);
}
/* remove keyboard navigation focus rectangle */
.breadcrumb3-item:focus-visible {
outline: none;
}
/* medium size breadcrumb3-item -----------------------------------*/
.breadcrumb3-md .breadcrumb3-item {
height: 32px;
line-height: 15px;
font-size: 15px;
padding-left: 20px;
}
.breadcrumb3-md .breadcrumb3-icon {
line-height: 20px;
font-size: 20px;
padding-right: 7px;
}
.breadcrumb3-md .breadcrumb3-item:first-child {
border-radius: 3px 0 0 3px;
padding-left: 12px;
}
/* all this to create edge on arrow, creating gray arrow in background */
.breadcrumb3-md .breadcrumb3-item:after {
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-left: 12px solid var(--_color);
margin-top: -16px;
margin-left: 1px;
}
/* this is arrow itself, overwriting gray arrow */
.breadcrumb3-md .breadcrumb3-item:before {
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-left: 12px solid var(--_bgcolor);
margin-top: -16px;
}
/* small size breadcrumb3-item-sm -----------------------------------*/
.breadcrumb3-sm .breadcrumb3-item {
height: 24px;
line-height: 11px;
font-size: 11px;
padding-right: 8px;
padding-left: 18px;
}
.breadcrumb3-sm .breadcrumb3-icon {
line-height: 16px;
font-size: 16px;
padding-right: 5px;
}
.breadcrumb3-sm .breadcrumb3-item:first-child {
border-radius: 3px 0 0 3px;
padding-left: 10px;
}
/* all this to create edge on arrow, creating gray arrow in background */
.breadcrumb3-sm .breadcrumb3-item:after {
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 8px solid var(--_color);
margin-top: -12px;
margin-left: 1px;
}
/* this is arrow itself, overwriting gray arrow */
.breadcrumb3-sm .breadcrumb3-item:before {
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 8px solid var(--_bgcolor);
margin-top: -12px;
}
/*breadcrumb3-item colors ------------------------------------------*/
/* we like specificity, to avoid namespace collisions */
.breadcrumb3-lg .primary , .breadcrumb3-md .primary , .breadcrumb3-sm .primary {
--_color: var(--_bs-primary-text);
--_bgcolor: var(--_bs-primary);
--_bg-subtle: var(--_bs-primary-bg-subtle);
--_hover-bgcolor: var(--_bs-success);
--_hover-color: var(--_bs-success-text);
}
.breadcrumb3-lg .secondary, .breadcrumb3-md .secondary, .breadcrumb3-sm .secondary {
--_color: var(--_bs-secondary-text);
--_bgcolor: var(--_bs-secondary);
--_bg-subtle: var(--_bs-secondary-bg-subtle);
--_hover-bgcolor: var(--_bs-primary);
--_hover-color: var(--_bs-primary-text);
}
.breadcrumb3-lg .success, .breadcrumb3-md .success, .breadcrumb3-sm .success {
--_color: var(--_bs-success-text);
--_bgcolor: var(--_bs-success);
--_bg-subtle: var(--_bs-success-bg-subtle);
--_hover-bgcolor: var(--_bs-primary);
--_hover-color: var(--_bs-primary-text);
}
.breadcrumb3-lg .info, .breadcrumb3-md .info, .breadcrumb3-sm .info {
--_color: var(--_bs-info-text);
--_bgcolor: var(--_bs-info);
--_bg-subtle: var(--_bs-info-bg-subtle);
--_hover-bgcolor: var(--_bs-primary);
--_hover-color: var(--_bs-primary-text);
}
.breadcrumb3-lg .warning, .breadcrumb3-md .warning, .breadcrumb3-sm .warning {
--_color: var(--_bs-warning-text);
--_bgcolor: var(--_bs-warning);
--_bg-subtle: var(--_bs-warning-bg-subtle);
--_hover-bgcolor: var(--_bs-primary);
--_hover-color: var(--_bs-primary-text);
}
.breadcrumb3-lg .danger, .breadcrumb3-md .danger, .breadcrumb3-sm .danger {
--_color: var(--_bs-danger-text);
--_bgcolor: var(--_bs-danger);
--_bg-subtle: var(--_bs-danger-bg-subtle);
--_hover-bgcolor: var(--_bs-primary);
--_hover-color: var(--_bs-primary-text);
}
.breadcrumb3-lg .light, .breadcrumb3-md .light, .breadcrumb3-sm .light {
--_color: var(--_bs-light-text);
--_bgcolor: var(--_bs-light);
--_bg-subtle: var(--_bs-light-bg-subtle);
--_hover-bgcolor: var(--_bs-primary);
--_hover-color: var(--_bs-primary-text);
}
.breadcrumb3-lg .dark, .breadcrumb3-md .dark, .breadcrumb3-sm .dark {
--_color: var(--_bs-dark-text);
--_bgcolor: var(--_bs-dark);
--_bg-subtle: var(--_bs-dark-bg-subtle);
--_hover-bgcolor: var(--_bs-primary);
--_hover-color: var(--_bs-primary-text);
}
Here is the new JavaScript file (breadcrumb3-dynamic-colors.js):
/**
* Dynamic Color Detection for Bootstrap Breadcrumb3
* Automatically extracts colors from Bootstrap text-bg-* classes
* and updates CSS custom properties for breadcrumb3 components
*
* Author: Mark.Pelf
*/
(function() {
'use strict';
/**
* Extracts the computed color from a Bootstrap text-bg class
* @param {string} className - The Bootstrap class name (e.g., 'text-bg-primary')
* @returns {string} The computed color value
*/
function getTextBgColor(className) {
// Create a temporary element with the Bootstrap class
const tempElement = document.createElement('div');
tempElement.className = className;
tempElement.style.position = 'absolute';
tempElement.style.visibility = 'hidden';
tempElement.style.pointerEvents = 'none';
tempElement.style.top = '-9999px';
// Add to DOM temporarily to compute styles
document.body.appendChild(tempElement);
// Get the computed color
const computedStyle = window.getComputedStyle(tempElement);
const color = computedStyle.color;
// Remove the temporary element
document.body.removeChild(tempElement);
return color;
}
/**
* Updates CSS custom properties based on Bootstrap text-bg classes
*/
function updateBreadcrumbColors() {
try {
// All 8 basic Bootstrap color variants with their corresponding CSS properties
const colorVariants = [
{ class: 'text-bg-primary', property: '--_bs-primary-text-dynamic', fallback: '#fff' },
{ class: 'text-bg-secondary', property: '--_bs-secondary-text-dynamic', fallback: '#fff' },
{ class: 'text-bg-success', property: '--_bs-success-text-dynamic', fallback: '#fff' },
{ class: 'text-bg-info', property: '--_bs-info-text-dynamic', fallback: '#000' },
{ class: 'text-bg-warning', property: '--_bs-warning-text-dynamic', fallback: '#000' },
{ class: 'text-bg-danger', property: '--_bs-danger-text-dynamic', fallback: '#fff' },
{ class: 'text-bg-light', property: '--_bs-light-text-dynamic', fallback: '#000' },
{ class: 'text-bg-dark', property: '--_bs-dark-text-dynamic', fallback: '#fff' }
];
const detectedColors = {};
colorVariants.forEach(variant => {
try {
const color = getTextBgColor(variant.class);
document.documentElement.style.setProperty(variant.property, color);
detectedColors[variant.class] = color;
} catch (error) {
console.warn(`Breadcrumb3: Could not detect color for ${variant.class}, using fallback ${variant.fallback}`);
document.documentElement.style.setProperty(variant.property, variant.fallback);
detectedColors[variant.class] = variant.fallback;
}
});
console.log('Breadcrumb3: Dynamic colors updated successfully');
console.log('Detected colors:', detectedColors);
return detectedColors;
} catch (error) {
console.warn('Breadcrumb3: Could not detect Bootstrap colors, using fallbacks', error);
return null;
}
}
/**
* Initialize color detection when DOM is ready
*/
function init() {
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', updateBreadcrumbColors);
} else {
// DOM already loaded
updateBreadcrumbColors();
}
// Also update when window loads (in case Bootstrap CSS loads asynchronously)
window.addEventListener('load', updateBreadcrumbColors);
}
/**
* Public API to manually refresh colors (useful when switching themes dynamically)
*/
window.Breadcrumb3 = window.Breadcrumb3 || {};
window.Breadcrumb3.refreshColors = updateBreadcrumbColors;
window.Breadcrumb3.getDetectedColors = function() {
return updateBreadcrumbColors();
};
// Initialize
init();
})(); And demo HTML hasn’t changed much.
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" href="..\bootstrap_themes\bootstrap_original.css" /> -->
<link rel="stylesheet" href="..\bootstrap_themes\bootstrap-theme-flatly.css" />
<!-- Order is important! Synchronous!------------------>
<!-- Dynamic Color Detection Script -->
<script src="breadcrumb3-dynamic-colors.js"></script>
<link rel="stylesheet" href="breadcrumb3.css" />
<!-- Download bootstrap icons from https://icons.getbootstrap.com/#install
and install -->
<link rel="stylesheet" href="..\bootstrap-icons-1.11.3\font\bootstrap-icons.min.css" />
</head>
<body>
<!--Large size --------------------------------------------------------------->
<H5>Large size, info case</H5>
<div class="breadcrumb3-lg ">
<a href="#" class="breadcrumb3-item info">Accounts</a>
<a href="#" class="breadcrumb3-item info">Account number</br>123456</a>
<a href="#" class="breadcrumb3-item primary">Details</a>
</div>
<H5>Large size, info case, with no hover effect on the last button</H5>
<div class="breadcrumb3-lg ">
<a href="#" class="breadcrumb3-item info">Contracts</a>
<a href="#" class="breadcrumb3-item info">Contract number</br>99999-2024</a>
<a href="#" class="breadcrumb3-item primary no-hover-effect">Contract Info</a>
</div>
<H5>Large size, Rainbow</H5>
<div class="breadcrumb3-lg ">
<a href="#" class="breadcrumb3-item info ">Breadcrumb</br>info</a>
<a href="#" class="breadcrumb3-item primary ">Breadcrumb</br>primary</a>
<a href="#" class="breadcrumb3-item warning ">Breadcrumb</br>warning</a>
<a href="#" class="breadcrumb3-item success ">Breadcrumb</br>success</a>
<a href="#" class="breadcrumb3-item secondary ">Breadcrumb</br>secondary</a>
<a href="#" class="breadcrumb3-item light ">Breadcrumb</br>light</a>
<a href="#" class="breadcrumb3-item danger ">Breadcrumb</br>danger</a>
</div>
<H5>Large size, icons usage</H5>
<div class="breadcrumb3-lg ">
<a href="#" class="breadcrumb3-item info">
<span class="breadcrumb3-icon" ><i class="bi bi-people-fill"></i></span>
<span class="breadcrumb3-text" >Users</span>
</a>
<a href="#" class="breadcrumb3-item info">
<span class="breadcrumb3-icon" ><i class="bi bi-person-fill"></i></span>
<span class="breadcrumb3-text" >User number</br>123456</span>
</a>
<a href="#" class="breadcrumb3-item primary">
<span class="breadcrumb3-icon" ><i class="bi bi-info-circle-fill"></i></span>
<span class="breadcrumb3-text" >Details</span>
</a>
</div>
<!--Medium size --------------------------------------------------------------->
<H5>Medium size, info case</H5>
<div class="breadcrumb3-md ">
<a href="#" class="breadcrumb3-item info">Accounts</a>
<a href="#" class="breadcrumb3-item info">Account number</br>123456</a>
<a href="#" class="breadcrumb3-item primary">Details</a>
</div>
<H5>Medium size, info case, with no hover effect on the last button</H5>
<div class="breadcrumb3-md ">
<a href="#" class="breadcrumb3-item info">Contracts</a>
<a href="#" class="breadcrumb3-item info">Contract number</br>99999-2024</a>
<a href="#" class="breadcrumb3-item primary no-hover-effect">Contract Info</a>
</div>
<H5>Medium size, Rainbow</H5>
<div class="breadcrumb3-md ">
<a href="#" class="breadcrumb3-item info ">Breadcrumb</br>info</a>
<a href="#" class="breadcrumb3-item primary ">Breadcrumb</br>primary</a>
<a href="#" class="breadcrumb3-item warning ">Breadcrumb</br>warning</a>
<a href="#" class="breadcrumb3-item success ">Breadcrumb</br>success</a>
<a href="#" class="breadcrumb3-item secondary ">Breadcrumb</br>secondary</a>
<a href="#" class="breadcrumb3-item light ">Breadcrumb</br>light</a>
<a href="#" class="breadcrumb3-item danger ">Breadcrumb</br>danger</a>
</div>
<H5>Medium size, icons usage</H5>
<div class="breadcrumb3-md ">
<a href="#" class="breadcrumb3-item info">
<span class="breadcrumb3-icon" ><i class="bi bi-people-fill"></i></span>
<span class="breadcrumb3-text" >Users</span>
</a>
<a href="#" class="breadcrumb3-item info">
<span class="breadcrumb3-icon" ><i class="bi bi-person-fill"></i></span>
<span class="breadcrumb3-text" >User number</br>123456</span>
</a>
<a href="#" class="breadcrumb3-item primary">
<span class="breadcrumb3-icon" ><i class="bi bi-info-circle-fill"></i></span>
<span class="breadcrumb3-text" >Details</span>
</a>
</div>
<!--Small size --------------------------------------------------------------->
<H5>Small size, info case</H5>
<div class="breadcrumb3-sm ">
<a href="#" class="breadcrumb3-item info">Accounts</a>
<a href="#" class="breadcrumb3-item info">Account number</br>123456</a>
<a href="#" class="breadcrumb3-item primary">Details</a>
</div>
<H5>Small size, info case, with no hover effect on the last button</H5>
<div class="breadcrumb3-sm ">
<a href="#" class="breadcrumb3-item info">Contracts</a>
<a href="#" class="breadcrumb3-item info">Contract number</br>99999-2024</a>
<a href="#" class="breadcrumb3-item primary no-hover-effect">Contract Info</a>
</div>
<H5>Small size, Rainbow</H5>
<div class="breadcrumb3-sm ">
<a href="#" class="breadcrumb3-item info ">Breadcrumb</br>info</a>
<a href="#" class="breadcrumb3-item primary ">Breadcrumb</br>primary</a>
<a href="#" class="breadcrumb3-item warning ">Breadcrumb</br>warning</a>
<a href="#" class="breadcrumb3-item success ">Breadcrumb</br>success</a>
<a href="#" class="breadcrumb3-item secondary ">Breadcrumb</br>secondary</a>
<a href="#" class="breadcrumb3-item light ">Breadcrumb</br>light</a>
<a href="#" class="breadcrumb3-item danger ">Breadcrumb</br>danger</a>
</div>
<H5>Small size, icons usage</H5>
<div class="breadcrumb3-sm ">
<a href="#" class="breadcrumb3-item info">
<span class="breadcrumb3-icon" ><i class="bi bi-people-fill"></i></span>
<span class="breadcrumb3-text" >Users</span>
</a>
<a href="#" class="breadcrumb3-item info">
<span class="breadcrumb3-icon" ><i class="bi bi-person-fill"></i></span>
<span class="breadcrumb3-text" >User number</br>123456</span>
</a>
<a href="#" class="breadcrumb3-item primary">
<span class="breadcrumb3-icon" ><i class="bi bi-info-circle-fill"></i></span>
<span class="breadcrumb3-text" >Details</span>
</a>
</div>
</body>
</html>3 How Breadcrumb3 Solution Works
The Breadcrumb3 solution is a responsive, Bootstrap-compatible breadcrumb component that consists of two complementary files:
3.1 breadcrumb3.css - Visual Styling & Layout
· Dynamic Bootstrap Integration: Uses CSS custom properties to inherit colors from any Bootstrap theme, with fallback values if Bootstrap isn't available
· Responsive Design: Automatically switches from horizontal to vertical layout on mobile devices (< 768px) using CSS flexbox
· Three Size Variants: Provides breadcrumb3-lg, breadcrumb3-md, and breadcrumb3-sm classes for different use cases
· Arrow-Style Navigation: Creates characteristic breadcrumb arrows using CSS pseudo-elements (:before and :after)
· Color Theming: Supports all 8 Bootstrap color variants (primary, secondary, success, info, warning, danger, light, dark) with hover effects
3.2 breadcrumb3-dynamic-colors.js - Smart Color Detection
· Automatic Color Extraction: Dynamically detects text colors from Bootstrap's text-bg-* classes by creating temporary DOM elements
· Theme Compatibility: Ensures breadcrumb text colors match Bootstrap's design system regardless of the active theme
· Fallback System: Provides sensible defaults if color detection fails
· Public API: Exposes window.Breadcrumb3.refreshColors() for manual theme updates and dynamic theme switching
3.3 How They Work Together
· The CSS defines placeholder variables (--_bs-primary-text-dynamic, etc.) with fallback colors
· The JavaScript detects actual Bootstrap colors and updates these CSS variables at runtime
· This ensures breadcrumbs automatically adapt to any Bootstrap theme while maintaining accessibility and visual consistency
· This approach provides a robust, theme-agnostic breadcrumb component that works seamlessly with Bootstrap's design system and responds gracefully to theme changes.
4 Final Result
4.1 Default, without Bootstrap theme
Here is the resulting rendering, without any Bootstrap theme, with default colors.
4.2 With default Bootstrap theme
Here is the resulting rendering, with the default Bootstrap theme.
4.3 With custom Bootstrap theme
Here is the resulting rendering, with some custom Bootstrap theme. This component Breadcrumbs inherits the color scheme from the custom Bootstrap theme.
5 References
[1] https://icons.getbootstrap.com/#install
[2] https://www.w3.org/Style/Examples/007/text-shadow
[99] https://github.com/MarkPelf/ArticlesCode , folder 129_BootstrapBreadcrumbs_ver6