Theming and Customizing styles.#

Generally, if you stick to the bootstrap defined classes and variants, there isn't anything you need to do to use a custom theme with ReactBootstrap, it just works. There are plently of cases tho where you want to color outside the lines and we try to make that easy to do.

New variants and sizes#

Custom variants and sizes should follow the pattern of the default bootstrap variants, and define css classes matching: component-*. React bootstrap builds the componentclassNames in a consistent way that you can rely on. For instance this custom Button.

<>
  <style type="text/css">
    {`
    .btn-flat {
      background-color: purple;
      color: white;
    }

    .btn-xxl {
      padding: 1rem 1.5rem;
      font-size: 1.5rem;
    }
    `}
  </style>

  <Button variant="flat" size="xxl">
    flat button
  </Button>
</>;

Prefixing components#

In some cases you may need to change the base class "prefix" of one or more Components. You can control how a Component prefixes it's classes locally by changing the bsPrefix prop. Or globally via the ThemeProvider Component.

<>
  {/* Hint: inspect the markup to see how the classes differ */}
  <ThemeProvider prefixes={{ btn: 'my-btn' }}>
    <Button variant="primary">My Button</Button>
  </ThemeProvider>{' '}
  <Button bsPrefix="super-btn" variant="primary">
    Super button
  </Button>
</>;