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
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());
})
``