Boobstrap v0.7.0

Build with Boobstrap.

A CSS-first framework for responsive layouts, polished components, practical utilities, and optional behavior. Bring your own JavaScript, use Boobstrap's dependency-free controllers, or add an official Alpine, React, or Vue adapter.

Download starter Open playground

1099 classes 109 tokens 1097 classes 109 tokens 0 JavaScript dependencies

What ships in the framework

CSS foundations

A small reset, semantic theme tokens, responsive containers, a 12-column grid, typography, and composable utilities.

UI components

Buttons, cards, badges, alerts, banners, form controls, code windows, and interaction presentation classes.

Optional behavior

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.

Ready to ship

A composed interface

Tokens, components, and utilities work together without changing the meaning of your markup.

Explore buttons

HTML · First component

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

Documentation

Browse by topic

Each topic now has its own focused route, local page outline, rendered examples, copy-ready source, and guidance. Start with a foundation or jump directly to a component.

01

Get started

IntroductionArchitecture and what is included What's new in v0.7Hardened controllers, adapter parity, CSS additions Installationnpm, pnpm, Yarn, Bun, and CDN Starter templateDownload and run a complete project ThemingModes, palettes, corners, and tokens TypeScriptBuilt-in declarations for every behavior layer

02

Foundations

TypographyType scale and text utilities LinksDefaults, emphasis, and interaction states Native HTML elementsLists, quotes, code, disclosure, and media Layout and gridContainers, columns, flex, and gaps Responsive compositionMobile-first page structure

03

Components

ButtonsVariants, groups, icons, and loading NavigationHeaders, vertical nav, breadcrumbs, and page links SidebarApplication shells, menus, drawers, and collapse modes BadgesStatus and metadata labels AvatarsImages, initials, presence, and groups CardsFlexible content surfaces DialogsModal workflows, forms, sizing, and scrolling DrawersStart/end panels with fixed regions and scrolling bodies TablesResponsive structured data Table fundamentalsSemantics, overflow, sorting, and empty states Table stylesStripes, hover rows, borders, and density PaginationAccessible page controls and sizes DataTables.netInstall and run the complete DataTables 3 integration Reference lists and checklistsDense values and completion steps AlertsContextual messages and status AccordionAccessible grouped disclosures across every adapter BannersFull-width contextual page notices ProgressDeterminate and indeterminate status SkeletonsMotion-safe, content-shaped loading placeholders Empty statesExplanations and recovery actions ToastsTemporary status notifications FormsLabeled inputs and controls Inputs and textareasLabels, sizes, states, and feedback Input groups and iconsPrefixes, suffixes, actions, and markers Native selectsStyled semantic selection controls Searchable selectBoobstrap JS, Alpine, React, and Vue Date and timeBrowser-native picker types File, range, and colorNative upload, slider, and picker controls Passwords and masksReveal actions and formatted entry Checkboxes and radiosChecks, radios, switches, and descriptions One-time passwordComplete six-digit verification input Code windowsTerminal and source presentation IconsLucide integration and icon sizing

04

Interactivity

Behavior layersCSS, Boobstrap JS, Alpine, React, and Vue CollapseExpandable content regions DropdownKeyboard-accessible action menus TabsRoving focus and synchronized panels Tooltips and popoversAutomatically positioned contextual feedback React adapterSSR-safe headless hooks Vue adapterSSR-safe headless composables

05

Reference

UtilitiesLayout, spacing, and typography Design tokensTheme values and customization All classesSearch the installed stylesheet AccessibilitySemantics, focus, motion, and contrast