Introduction
Learn what Boobstrap includes, how its CSS-first architecture works, and which optional behavior layer fits your project.
What ships in the framework
CSS foundations
A small reset, semantic theme tokens with code exports, responsive containers, a 12-column grid, typography, and composable utilities.
UI components
Buttons, cards, badges, accordions, skeletons, alerts, banners, form controls, code windows, and interaction presentation classes.
Optional behavior
Typed, dependency-free controllers plus official Alpine.js, React, and Vue adapters for stateful components.
Copy-ready docs
Every visual example is paired with source and can be inspected independently in light or dark mode.
Your first component
Import the stylesheet once, then compose semantic HTML with namespaced bs- classes.
A composed interface
Tokens, components, and utilities work together without changing the meaning of your markup.
Explore buttons<article class="bs-card bs-card-raised">
<div class="bs-card-body">
<span class="bs-badge bs-badge-primary">Ready to ship</span>
<h2 class="bs-card-title bs-mt-4">A composed interface</h2>
<p class="bs-card-text bs-mb-4">Tokens, components, and utilities work together.</p>
<a class="bs-btn bs-btn-primary bs-btn-sm" href="/docs">Explore the docs</a>
</div>
</article>