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 component classNames in a consistent way that you can rely on. For instance this custom Button.

Result

Loading...

Live Editor

import Button from 'react-bootstrap/Button'; function VariantsExample() { return ( <> <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> </> ); } export default VariantsExample;

import Button from 'react-bootstrap/Button';

function VariantsExample() {
  return (
    <>
      <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>
    </>
  );
}

export default VariantsExample;

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 its classes locally by changing the bsPrefix prop or globally via the ThemeProvider component.

Caution

Changing prefixes is an escape hatch and generally shouldn't be used.

Result

Loading...

Live Editor

import ThemeProvider from 'react-bootstrap/ThemeProvider'; import Button from 'react-bootstrap/Button'; function PrefixesExample() { return ( <> {/* 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> </> ); } export default PrefixesExample;

import ThemeProvider from 'react-bootstrap/ThemeProvider';
import Button from 'react-bootstrap/Button';

function PrefixesExample() {
  return (
    <>
      {/* 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>
    </>
  );
}

export default PrefixesExample;