JavaScript

Bootstrap's bundle#

felt-css styles the same classes and states Bootstrap's JavaScript sets (.show, .collapsing, .active, .fade…), so dropdowns, modals, offcanvas, tooltips, popovers, tabs, collapse and toasts work by including Bootstrap's bundle before </body>. The bundle includes Popper for positioning dropdowns, tooltips and popovers.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

Everything else — data attributes, options, methods, events — is Bootstrap's and documented in Bootstrap's JavaScript guide. The component pages here link to the matching section.

Data attributes#

Nearly all components can be driven from markup with data-bs-* attributes, without writing any JavaScript:

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseJsExample" aria-expanded="false" aria-controls="collapseJsExample">
  Toggle a collapse
</button>
<div class="collapse" id="collapseJsExample">
  <div class="card card-body mt-3">
    Opened by Bootstrap's collapse plugin, styled by felt-css.
  </div>
</div>

Opt-in components#

As in Bootstrap, tooltips and popovers are opt-in for performance reasons, and toasts are shown from code. Initialise them yourself:

document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => new bootstrap.Tooltip(el))
document.querySelectorAll('[data-bs-toggle="popover"]').forEach(el => new bootstrap.Popover(el))
bootstrap.Toast.getOrCreateInstance(document.querySelector('#myToast')).show()

No JavaScript needed#

Some components have a native HTML variant in felt-css that works without any script:

• Accordion on <details class="accordion-item"> — see Accordion.
• Modal on <dialog class="modal">, opened with showModal() — see Modal.
• Floating labels, switches, .btn-check toggles and validation states are pure CSS anyway.

<div class="accordion">
  <details class="accordion-item">
    <summary class="accordion-button">What holds the felt together?</summary>
    <div class="accordion-body">Thread, mostly. And a native <code>&lt;details&gt;</code> element — no script involved.</div>
  </details>
</div>

Reduced motion#

felt-css turns its transitions off for visitors who ask for reduced motion (prefers-reduced-motion: reduce), like Bootstrap does.