React Bootstrap

Overview

React Bootstrap is a rebuild of the Bootstrap component library for React — replacing Bootstrap's jQuery-based JavaScript with native React components. Bootstrap's theming system is entirely CSS-variable-driven via --bs-* variables.

Project Files

Configuration

Theme

React Bootstrap reads from this project's CSS custom variables. reactbootstrap.css remaps the project's config tokens to Bootstrap's expected --bs-* variable names:

:root {
  --bs-primary:       var(--custom-color-primary);
  --bs-secondary:     var(--custom-color-secondary);
  --bs-body-bg:       var(--custom-color-background);
  --bs-body-color:    var(--custom-color-foreground);
  --bs-border-radius: var(--custom-radius-base);
}

Overrides

Component-level overrides for buttons, modals, offcanvas, and dropdowns are also defined in reactbootstrap.css:

.modal-content {
  --bs-modal-bg:    var(--custom-color-popover);
  --bs-modal-color: var(--custom-color-popover-foreground);
}

.dropdown-menu {
  --bs-dropdown-bg:         var(--custom-color-popover);
  --bs-dropdown-link-color: var(--custom-color-popover-foreground);
}

Light & Dark Mode

Bootstrap's built-in dark mode is activated by data-bs-theme="dark" on the root element. ReactBootstrapThemeSyncer listens to resolved theme from next-themes and sets the attribute via a useEffect:

export const ReactBootstrapThemeSyncer = ({ children }) => {
  const { resolvedTheme } = useNextTheme();

  useEffect(() => {
    document.documentElement.setAttribute(
      "data-bs-theme",
      resolvedTheme === "dark" ? "dark" : "light",
    );
  }, [resolvedTheme]);

  return <>{children}</>;
};

Injection Script

To avoid a flash on first load, an inline script in layout.tsx runs before serving the page.

// layout.tsx
<script
  dangerouslySetInnerHTML={{
    __html: `
      try {
        const stored = localStorage.getItem('theme')
        const system = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
        const theme = stored === 'dark' || stored === 'light' ? stored : system
        document.documentElement.setAttribute('data-bs-theme', theme)
      } catch(e) {}
    `,
  }}
/>

See Pain Points: SSR Flicker for details.

Components

All React Bootstrap components work exactly as documented. The --bs-* CSS variables set in reactbootstrap.css are picked up automatically, so every component inherits the correct colors, radius, and dark mode without any extra configuration.

React Bootstrap ComponentsView Project Demo

Additional Info

RGB Triplets

Bootstrap uses rgba() internally for focus rings, disabled states, and overlays, referencing separate --bs-*-rgb triplets (e.g. --bs-primary-rgb: 53, 122, 110).

The generateColorsRgb script produces colors-rgb.css with --custom-color-*-rgb variables for both light and dark.

reactbootstrap.css maps to the --bs-*-rgb names:

:root {
  --bs-primary-rgb: var(--custom-color-primary-rgb);
}

Official Resources

React Bootstrap InstallationReact Bootstrap ThemingReact Bootstrap ComponentsReact Bootstrap WebsiteBootstrap CSS Variables