bs-elements is a framework-agnostic Web Component library built around the Bootstrap philosophy.

The same HTML markup, styles, JavaScript API, and events you already know, just wrapped in a declarative Custom Element API — without hiding, replacing, or reinventing anything. It feels more natural, composable, and built for modern development.

Use it with vanilla JS or any framework you like.

ℹ️ How it works?

  1. Place bs-elements.min.js script at the bottom of your Bootstrap 5 page.
  2. Use our custom elements e.g. <bs-modal> instead of generic <div> elements.
  3. Skip the boilerplate parts if you want and enjoy reactivity! ✨
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
  
    <bs-modal class="modal" data-bs-backdrop="static" header="Modal title" dismissible open>
      <p>Modal body text goes here.</p>
    </bs-modal>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@programmerg/bs-elements@0.1.1/dist/bs-elements.min.js"></script>
  </body>
</html>

For more information visit our GitHub repository.

📦 Base Components

bs-accordion

Body 1
Body 2
Body 3

bs-alert

This is an alert

bs-button

Button

bs-carousel

First slide
First slide label

Some representative placeholder content for the first slide.

Second slide
Second slide label

Some representative placeholder content for the second slide.

Thrid slide
Third slide label

Some representative placeholder content for the third slide.

bs-collapse

Toggle collapse

Collapsed content

bs-dropdown

Action Another action Something else

bs-modal

Open modal
Modal title

Modal body text goes here.

bs-offcanvas

Open offcanvas

Modal body text goes here.

bs-popover

Click to toggle popover

bs-tabs

First tab Second tab Thrid tab Disabled tab

bs-toast

Hello, world! This is a toast message.

bs-tooltip

Tooltip on top

Made with ❤️, HTML and JS.