A set of native Web Components that wrap and extend Bootstrap's own components, bringing them to the Custom Elements standard.
npm install bootstrap-wc-addonBootstrap WC Addon is a set of native Web Components that wrap and extend Bootstrap's own components, bringing them to the Custom Elements standard.
This lets you use familiar Bootstrap styles and behaviors inside HTML tags like or — without manually writing all the Bootstrap markup.
Note! This library is a work in progress and is being developed as time allows. It is published on npm, but please note that it may not yet be ready for production use.

``html
textColor="light">
`
Via CDN (jsDelivr)
`html`
Note: Bootstrap 5 is required. Include it before this addon:
`html
`
css
:root {
--navbar-height: 60px;
--background-color: rgb(255 255 255 / .7);
--foreground-color: #000;
}.navbar {
height: var(--navbar-height);
background-color: var(--background-color);
}
.navbar * {
color: var(--foreground-color);
}
.active {
color: var(--bs-primary) !important;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: rgb(4 13 22 / .7);
--foreground-color: #fff;
}
}
`
🚀 Usage Example
`html
Click me
`
🌐 Demo site!
Demo site!
📖 Documentation from your own js
`js
document.addEventListener("DOMContentLoaded", () => {
const selectInstance = document.createElement('bs-navbar');
console.log(selectInstance.documentation());
})
``