The Bootstrap Ecosystem

Bootstrap 2,007 's MIT licence and stable class names have produced a large ecosystem. The projects fall into three groups: themes that restyle the same markup, dashboard kits that add layouts and extra components, and framework ports that replace Bootstrap's DOM-manipulating JavaScript with native React 7,897 , Angular 42,088 or Vue 5,482 components.

Themes. A Bootswatch theme is a complete replacement for bootstrap.min.css: keep your markup and Bootstrap's JavaScript, swap one <link>. The demo loads three themes into iframes so they sit side by side.

<div id="themes" style="display: flex; gap: 8px"></div>
<script>
  const card = `<div class="card m-2"><div class="card-body">
    <h5 class="card-title">NAME</h5><p class="card-text">Same markup.</p>
    <button class="btn btn-primary">Primary</button> <span class="badge text-bg-success">New</span>
  </div></div>`;
  for (const name of ['flatly', 'sketchy', 'vapor']) {
    const frame = document.createElement('iframe');
    frame.style.cssText = 'flex: 1; width: 0; height: 170px; border: 0';
    frame.srcdoc = `<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/${name}/bootstrap.min.css">`
      + card.replace('NAME', name);
    document.getElementById('themes').append(frame);
  }
</script>

With Sass 22,539 , each theme ships _variables.scss and _bootswatch.scss: import the first, then bootstrap/scss/bootstrap, then the second, and put your own overrides above all three (Custom Builds with Sass).

Dashboard kits. AdminLTE, Tabler and CoreUI give you sidebars, charts, tables and sign-in pages on top of Bootstrap 5; AdminLTE 4 is a jQuery-free rewrite on Bootstrap 5.3. All three are MIT at their core and sell premium editions, as does MDB, which restyles Bootstrap in Google's Material Design 15,533 . Start from the free edition: you can read the whole source before paying for extra components.

Framework ports. In React, Angular or Vue, Bootstrap's own plugins fight the framework for the DOM (Installing Bootstrap). The ports keep Bootstrap's CSS but rewrite every plugin as a component whose open state lives in the framework. React-Bootstrap, for example, drives its overlays through @restart/ui, which positions them with Popper 32,753 .

import { useState } from 'react';
import { Button, Modal } from 'react-bootstrap';
export default function Buy() {
  const [open, setOpen] = useState(false);
  return (<>
    <Button variant="primary" onClick={() => setOpen(true)}>Buy</Button>
    <Modal show={open} onHide={() => setOpen(false)}>
      <Modal.Body>Thanks!</Modal.Body>
    </Modal>
  </>);
}