bootstrap-wc-addon

v1.0.19

Published

5 months ago

A set of native Web Components that wrap and extend Bootstrap's own components, bringing them to the Custom Elements standard.

0High
0Medium
0Low

arnt81

bootstrap css addon styling web components

Bootstrap WC Addon

Bootstrap 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 <bs-button> or <bs-modal> — 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.

✨ Features

✅ Uses Bootstrap’s official components under the hood
✅ Delivered as native Web Components (Custom Elements API)
✅ Works with or without a JavaScript framework
✅ Extensible styling via both Bootstrap classes and custom CSS
✅ Compatible with Bootstrap 5

Quick Example or click the image for more

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Bootstrap WC Addon Test</title>
	<link rel="shortcut icon" href="#" />
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-wc-addon/css/style.min.css">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap-wc-addon@latest/dist/bootstrap-wc-addon.bundle.min.js"></script>
</head>

<body>
	<header>
		<bs-navbar brand="My company name" focus-color="primary"
			links='[{"href": "/", "label": "Home"}, {"Local": [{"href": "#top", "label": "Top"}, {"href": "#middle", "label": "Middle"}, {"href": "#bottom", "label": "Bottom"}]}, {"href": "https://www.anderssöderberg.se", "label": "External link", "target": "_blank"}]'>
		</bs-navbar>

		<bs-hero id="top" title="Welcome!" subtitle="Explore our site"
			background="https://videos.pexels.com/video-files/3129671/3129671-uhd_2560_1440_30fps.mp4"
			textColor="light">
		</bs-hero>
	</header>
</body>

</html>

📦 Installation

Via CDN (jsDelivr)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-wc-addon@latest/css/style.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-wc-addon@latest/dist/bootstrap-wc-addon.bundle.min.js"></script>

Note: Bootstrap 5 is required. Include it before this addon:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

🎨 Default 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

<bs-button variant="primary">Click me</bs-button>

🌐 Demo site!

Demo site!

📖 Documentation from your own js

document.addEventListener("DOMContentLoaded", () => {
	const selectInstance = document.createElement('bs-navbar');
	console.log(selectInstance.documentation());
})

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme