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 React-Bootstrap. It just works. But we also make coloring outside the lines 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>
</>