Getting Started with React Bootstrap

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to get started with React Bootstrap.

Installation

We can install React Bootstrap by running:

npm install react-bootstrap bootstrap

Importing Components

Once we imported our components, we can add the component we want by writing:

import React from "react";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <Button>button</Button>
    </div>
  );
}

We import the CSS and the button so we can add a button with the Boostrap styles.

We can also import the SASS code by writing:

@import "~bootstrap/scss/bootstrap";

This works with create-react-app apps.

Bootstrap with State

We can pass states to React Bootstrap components as we do with any other React component.

For instance, we can write:

import React from "react";
import Alert from "react-bootstrap/Alert";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const [show, setShow] = React.useState(true);

  return (
    <>
      <Button onClick={() => setShow(show => !show)} variant="outline-success">
        toggle alert
      </Button>
      <Alert show={show} variant="success">
        <Alert.Heading>title</Alert.Heading>
        <p>alert</p>
      </Alert>
    </>
  );
}

We have the show state that we use to toggle the alert.

We toggle the alert with the Button by running setShow to toggle the show state when we click the button.

Theming and Customizing Styles

We can style our components the ay we like.

For instance, we can write:

import React from "react";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <style type="text/css">
        {`
          .btn-flat {
            background-color: green;
            color: white;
          }

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

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

Button takes a variant and size prop that lets us style it however we like.

Other components also have these options.

variant is the button variant, which corresponds to the name after the prefix.

size is also after the prefix.

We have the btn-flat and btn-xxl classes that we can use to style the buttons.

We have the style element to apply the styles with a CSS string.

Prefixing Components

We can change the prefix of the class with the bsPrefix prop.

Or we can do the same globally with the ThemeProvider component.

For instance, we can write:

import React from "react";
import Alert from "react-bootstrap/Alert";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <style type="text/css">
        {`
         .super-btn-flat {
           background-color: green;
           color: white;
         }

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

      <Button bsPrefix="super-btn" variant="flat" size="xxl">
        button
      </Button>
    </>
  );
}

We change bsPrefix to super-btn , so all the class names of the button are prefixed with super-btn .

Therefore, our styles all have this prefix as their selectors.

We can do the same globally with the ThemeProvider as follows:

import React from "react";
import ThemeProvider from "react-bootstrap/ThemeProvider";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <style type="text/css">
        {`
          .super-btn-flat {
            background-color: green;
            color: white;
          }

          .super-btn-xxl {
            padding: 1rem 1.5rem;
            font-size: 2.5rem;
          }
       `}
      </style>
      <ThemeProvider prefixes={{ btn: "super-btn" }}>
        <Button variant="flat" size="xxl">
          button
        </Button>
      </ThemeProvider>
    </>
  );
}

We pass in an object to the prefixes prop.

And we set the btn property to super-btn to change the class name prefix of the button.

Conclusion

We can use React Bootstrap as a widget library for our React apps.

It provides styled React components that are styled in the Bootstrap style.

We can theme them with global styles or apply our local styles to them.