Introduction
Technical overview of Bravo's architecture and Bootstrap enhancement approach.
On this page
What is Bravo
Bravo is a curated set of enhancements for Bootstrap 5.3 that maintains full compatibility while adding commonly-needed features. It works by:
- SCSS layer — Imports Bootstrap's source, then applies enhancements and patches
- JavaScript extensions — Extends Bootstrap's components with additional functionality
- Opt-in architecture — Use only what you need, from SCSS-only to full JS enhancements
Technical architecture
SCSS structure
Bravo's main SCSS file (bravo.scss) orchestrates a specific import order:
- Loads Bravo's custom functions and color system first
- Imports Bootstrap's core files
- Applies patches and overrides
- Generates extended utilities
This eliminates import order issues while maintaining Bootstrap compatibility.
JavaScript approach
- Component extensions: Bravo's components extend Bootstrap's base classes
- DynamicObserver: MutationObserver-based auto-initialization for dynamic content
- Tree-shakeable: Import individual components or the full bundle
Key differences from Bootstrap
- Color system: 13 shades per color (vs 9), all available as CSS variables
- Typography: Larger scale, lighter weights, responsive sizing via RFS
- Grid: Optional
.column-*naming (requires separate import) - Components: Enhanced with loading states, interactive modes, programmatic APIs