 is one of the most popular UI frameworks on the web. It provides a lot of ready to use components and powerful theming support that greatly simplify building web applications. Today we're going to see how to start using Bootstrap in React applications.

. Every component is a mix of CSS, HTML, and sometimes JavaScript. That is the JavaScript part that makes them hard to use directly in React applications. React approach with components is not fully compatible with Bootstrap JavaScript and fixing all Bootstrap components is a complex and tedious task. There are libraries that do exactly that for you and they allow you to use Bootstrap components as React components.

For this article, we assume that you've got a basic understanding of React components. If you need a quick refresher, here's a good 

There are two popular options for using Bootstrap in React: 

. In this article, we're going to use the 

 which is a more stable and mature solution.

React Bootstrap implements Bootstrap elements as pure React components with no additional dependencies on Bootstrap JavaScript of jQuery. We can use these components as any other React components. At the same time, React Bootstrap relies on the Bootstrap stylesheet and is compatible with Bootstrap theming. This means that we can use existing Bootstrap themes in our application or create our custom Bootstrap theme.

# add with npm
npm install react-bootstrap
# or with yarn
yarn add react-bootstrap

React Bootstrap does not depend on Bootstrap JavaScript or any other dependencies like jQuery. However, it uses Bootstrap CSS to style components, so we need to add the 

# add witn npm
npm install bootstrap
# or with yarn
yarn add bootstrap

Now, everything is ready for using React Bootstrap components in our application:

import React from "react";
import Button from "react-bootstrap/Button";

import "bootstrap/dist/css/bootstrap.css";

export default function MyComponent() {
  return (
    <div>
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="primary" disabled>
        Disabled
      </Button>
    </div>
  );
}

We start by importing Bootstrap CSS with default styles from 

 to our application. Also, we import the 

 component to render three different button variations.

Here's how we can add any React Bootstrap component to the application. We start by reviewing 

. For every component, there is a description, demo of different variations and API description.

Once we've selected a component, we can add it to our application. We need to import it into our application and render it. For example, here's how to use the 

, a lightweight and easily customizable alert message:

import React, { useState } from "react";
import Button from "react-bootstrap/Button";
import Toast from "react-bootstrap/Toast";

import "bootstrap/dist/css/bootstrap.css";

export default function MyComponent() {
  const [showToast, setShowToast] = useState(true);
  const toggleShowToast = () => setShowToast(!showToast);

  return (
    <div>
      <Toast show={showToast} onClose={toggleShowToast}>
        <Toast.Header>
          <strong className="mr-auto">React Bootstrap</strong>
          <small>11 mins ago</small>
        </Toast.Header>
        <Toast.Body>You're reading this text in a Toast!</Toast.Body>
      </Toast>
      <Button onClick={toggleShowToast}>Toggle Toast</Button>
    </div>
  );
}

 component and use it to render an alert message.

React Bootstrap relies on Bootstrap CSS for styling components, which makes it compatible with Bootstrap themes. To change a style of React Bootstrap components we can use existing custom themes or create a new one.

The following example shows a modified Bootstrap theme, where a primary color has been changed to red and a background color has been set to grey:

import React from "react";
import Button from "react-bootstrap/Button";

import "./custom.scss";

export default function MyComponent() {
  return (
    <div>
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="primary" disabled>
        Disabled
      </Button>
    </div>
  );
}

This is our first example with buttons, but instead of a standard Bootstrap CSS we're importing our own theme defined in 

. In this file we overwrite values for a primary and background color and then import the default Bootstrap theme:

// Override default variables before the import
$body-bg: #adb5bd;

$theme-colors: (
  "primary": #ff4136
);

// Import Bootstrap and its default variables
@import '~bootstrap/scss/bootstrap.scss';

You can find more information on creating a custom theme in 

Bootstrap is a great UI framework that simplifies building web applications. React Bootstrap provides Bootstrap elements implemented as pure React components. At the same time, we can use Bootstrap CSS and custom Bootstrap themes to style our application.

Here are some additional links that will give you more information on this topic:

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">How to Start Using Bootstrap with React</h1><div data-node-type="summary" class="summary-block"><a href="https://getbootstrap.com/" rel="noopener noreferrer nofollow">Bootstrap</a> is one of the most popular UI frameworks on the web. It provides a lot of ready to use components and powerful theming support that greatly simplify building web applications. Today we're going to see how to start using Bootstrap in React applications.</div><p>Bootstrap provides a <a href="https://getbootstrap.com/docs/4.4/components/alerts/" rel="noopener noreferrer nofollow">rich set of components</a>. Every component is a mix of CSS, HTML, and sometimes JavaScript. That is the JavaScript part that makes them hard to use directly in React applications. React approach with components is not fully compatible with Bootstrap JavaScript and fixing all Bootstrap components is a complex and tedious task. There are libraries that do exactly that for you and they allow you to use Bootstrap components as React components.</p><p>For this article, we assume that you've got a basic understanding of React components. If you need a quick refresher, here's a good <a href="https://reactjs.org/docs/components-and-props.html" rel="noopener noreferrer nofollow">overview of React components</a>.</p><p>There are two popular options for using Bootstrap in React: <a href="https://react-bootstrap.netlify.com/" rel="noopener noreferrer nofollow">React Bootstrap</a> and <a href="https://reactstrap.github.io/" rel="noopener noreferrer nofollow">reactstrap</a>. In this article, we're going to use the <a href="https://react-bootstrap.netlify.com/" rel="noopener noreferrer nofollow">React Bootsrap</a> which is a more stable and mature solution.</p><p>React Bootstrap implements Bootstrap elements as pure React components with no additional dependencies on Bootstrap JavaScript of jQuery. We can use these components as any other React components. At the same time, React Bootstrap relies on the Bootstrap stylesheet and is compatible with Bootstrap theming. This means that we can use existing Bootstrap themes in our application or create our custom Bootstrap theme.</p><h2><a name="adding-react-bootstrap-to-project">Adding react-bootstrap to Project</a></h2><p>Let's start by adding the <code>react-bootstrap</code> package to our project.</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-yKZ6e" id="cm-yKZ6e"># add with npm
npm install react-bootstrap
# or with yarn
yarn add react-bootstrap</textarea><p>React Bootstrap does not depend on Bootstrap JavaScript or any other dependencies like jQuery. However, it uses Bootstrap CSS to style components, so we need to add the <code>bootstrap</code> package as well:</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-1CzRY" id="cm-1CzRY"># add witn npm
npm install bootstrap
# or with yarn
yarn add bootstrap</textarea><p>Now, everything is ready for using React Bootstrap components in our application:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-PbdPS" id="cm-PbdPS">import React from "react";
import Button from "react-bootstrap/Button";

import "bootstrap/dist/css/bootstrap.css";

export default function MyComponent() {
  return (
    &lt;div&gt;
      &lt;Button variant="primary"&gt;Primary&lt;/Button&gt;
      &lt;Button variant="secondary"&gt;Secondary&lt;/Button&gt;
      &lt;Button variant="primary" disabled&gt;
        Disabled
      &lt;/Button&gt;
    &lt;/div&gt;
  );
}</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fynsuy&amp;src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fynsuy&amp;type=text%2Fhtml&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>We start by importing Bootstrap CSS with default styles from <code>bootstrap</code> to our application. Also, we import the <code>Button</code> component from the <code>react-bootstrap</code>. After that, we're using the <code>Button</code> component to render three different button variations.</p><h2><a name="using-react-bootstrap-components">Using React Bootstrap Components</a></h2><p>Here's how we can add any React Bootstrap component to the application. We start by reviewing <a href="https://react-bootstrap.netlify.com/components/alerts" rel="noopener noreferrer nofollow">available Bootstrap components</a>. For every component, there is a description, demo of different variations and API description.</p><p>Once we've selected a component, we can add it to our application. We need to import it into our application and render it. For example, here's how to use the <a href="https://react-bootstrap.netlify.com/components/toasts/" rel="noopener noreferrer nofollow">Toast</a>, a lightweight and easily customizable alert message:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-enDPH" id="cm-enDPH">import React, { useState } from "react";
import Button from "react-bootstrap/Button";
import Toast from "react-bootstrap/Toast";

import "bootstrap/dist/css/bootstrap.css";

export default function MyComponent() {
  const [showToast, setShowToast] = useState(true);
  const toggleShowToast = () =&gt; setShowToast(!showToast);

  return (
    &lt;div&gt;
      &lt;Toast show={showToast} onClose={toggleShowToast}&gt;
        &lt;Toast.Header&gt;
          &lt;strong className="mr-auto"&gt;React Bootstrap&lt;/strong&gt;
          &lt;small&gt;11 mins ago&lt;/small&gt;
        &lt;/Toast.Header&gt;
        &lt;Toast.Body&gt;You're reading this text in a Toast!&lt;/Toast.Body&gt;
      &lt;/Toast&gt;
      &lt;Button onClick={toggleShowToast}&gt;Toggle Toast&lt;/Button&gt;
    &lt;/div&gt;
  );
}</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fcodesandbox.io%2Fs%2F4ztvx&amp;src=https%3A%2F%2Fcodesandbox.io%2Fembed%2F4ztvx&amp;type=text%2Fhtml&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>We import the <code>Toast</code> component and use it to render an alert message.</p><h2><a name="styling-react-bootstrap-components">Styling React Bootstrap Components</a></h2><p>React Bootstrap relies on Bootstrap CSS for styling components, which makes it compatible with Bootstrap themes. To change a style of React Bootstrap components we can use existing custom themes or create a new one.</p><p>The following example shows a modified Bootstrap theme, where a primary color has been changed to red and a background color has been set to grey:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-uOKwA" id="cm-uOKwA">import React from "react";
import Button from "react-bootstrap/Button";

import "./custom.scss";

export default function MyComponent() {
  return (
    &lt;div&gt;
      &lt;Button variant="primary"&gt;Primary&lt;/Button&gt;
      &lt;Button variant="secondary"&gt;Secondary&lt;/Button&gt;
      &lt;Button variant="primary" disabled&gt;
        Disabled
      &lt;/Button&gt;
    &lt;/div&gt;
  );
}</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2F56wc5&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2F56wc5&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2F56wc5%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>This is our first example with buttons, but instead of a standard Bootstrap CSS we're importing our own theme defined in <code>custom.scss</code>. In this file we overwrite values for a primary and background color and then import the default Bootstrap theme:</p><textarea data-iscodemirror="true" data-mode="text/x-scss" data-uniqueid="cm-7GBEo" id="cm-7GBEo">// Override default variables before the import
$body-bg: #adb5bd;

$theme-colors: (
  "primary": #ff4136
);

// Import Bootstrap and its default variables
@import '~bootstrap/scss/bootstrap.scss';</textarea><p>You can find more information on creating a custom theme in <a href="https://getbootstrap.com/docs/4.1/getting-started/theming/" rel="noopener noreferrer nofollow">theming Bootstrap documentation</a>.</p><h2><a name="conclusion">Conclusion</a></h2><p>Bootstrap is a great UI framework that simplifies building web applications. React Bootstrap provides Bootstrap elements implemented as pure React components. At the same time, we can use Bootstrap CSS and custom Bootstrap themes to style our application.</p><h2><a name="more-resources">More Resources</a></h2><p>Here are some additional links that will give you more information on this topic:</p><ul><li><p><a href="https://react-bootstrap.github.io/getting-started/introduction" rel="noopener noreferrer nofollow">React Bootstrap documentation</a>.</p></li><li><p>Documentation for <a href="https://reactstrap.github.io/" rel="noopener noreferrer nofollow">reactstrap</a>, which is another popular library for using Bootstrap in React.</p></li><li><p>Guide for <a href="https://getbootstrap.com/docs/4.0/getting-started/theming/" rel="noopener noreferrer nofollow">theming in Bootstrap</a>.</p></li></ul>

AUTHOR

Dmitry Rogozhny

Bootstrap is one of the most popular UI frameworks on the web. It provides a lot of ready to use components and powerful theming support that greatly simplify building web applications. Today we're going to see how to start using Bootstrap in React applications.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

How to Start Using Bootstrap with React

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript