Styling tweaks

Beyond the new components and features, Bravo includes subtle design improvements that address common Bootstrap pain points. These work behind the scenes to create a more polished user experience.

Typography refinements

Bravo refines Bootstrap's typography with a modern scale and improved readability:

• Larger, lighter headings — H1 is 2.8rem (vs 2.5rem) with weight 500 (vs 700)
• New .jumbo utility — 3.5rem hero headings for landing pages
• Responsive margins — Using RFS, margins scale with screen size
• Better visual density — Subtle letter-spacing on large text

<h1 class="jumbo">Hero heading</h1>
<h2>Refined subheading</h2>

Form control improvements

Input groups now handle focus states properly — focused inputs get elevated z-index to prevent their focus rings from being clipped by adjacent elements:

Try tabbing to the input above to see the clean focus ring display.

Enhanced animations

Components throughout Bravo include thoughtful animation improvements:

These animations respect user preferences and are automatically disabled for users who prefer reduced motion.

Design consistency

All improvements follow Bootstrap's existing design language while fixing usability issues. Focus colors automatically tie to your theme variables, animations use consistent timing, and enhancements are designed to feel like natural extensions of Bootstrap rather than additions.

Details

These improvements are automatically applied — no configuration needed. They maintain full Bootstrap compatibility while creating a more refined experience.