Using Bootstrap with React: Tutorial with examples

Editor’s note: This post was updated on 30 August 2023 to update code blocks according to React 18 and add information about customizing Bootstrap 5 with Sass.

The increasing popularity of single-page applications over the last few years has led to an influx of JavaScript frameworks, the most popular of which being React. This has coincided with the emergence of CSS frameworks designed to help developers build responsive web apps.

If React is the most-used JavaScript framework for building web applications, Bootstrap is the most popular CSS framework, powering millions of websites on the internet. In this tutorial, we will review how to add Bootstrap to React according to the latest version of both frameworks. We’ll also learn how to use the React-Bootstrap and Reactstrap packages to provide Bootstrap components for a React application.

Jump ahead:

• An introduction to JavaScript and CSS frameworks
• How to add Bootstrap to React
  • Adding Bootstrap using Bootstrap CDN
  • Importing Bootstrap as a dependency
  • Installing a React Bootstrap package such as React-Bootstrap or Reactstrap
• Using built-in Bootstrap classes and components
  • Customizing with React-Bootstrap
  • Customizing with Reactstrap
• Creating a more detailed React app with Bootstrap
• Customizing Bootstrap with Sass
• Creating a responsive layout using the Bootstrap grid system

If you’re just getting started with these frameworks, I’d suggest skimming through the official React and Bootstrap documentation. I’d also encourage you to watch the comprehensive video below for a deeper dive:

An introduction to JavaScript and CSS frameworks

There are many JavaScript frameworks you can choose from, including Angular, React, Vue.js, Ember, and so many more. Thanks to these options, it’s no longer necessary to use a DOM library, such as jQuery, to build web apps.

In addition, if you’re a frontend developer, you’ve almost certainly used or at least heard about Bootstrap, Foundation, and Bulma. These are all responsive (mobile-first) CSS frameworks with robust features and built-in utilities.

As we mentioned, React and Bootstrap are currently the most popular JavaScript and CSS frameworks, respectively. Developers use React and Bootstrap not only because of their widespread popularity but also to avoid the hassle of building web applications from scratch. Both libraries are highly modular, which makes it easy to add new features and functionality to web applications. As a result, React and Bootstrap are popular choices for developers who are looking to build high-quality web applications quickly and efficiently.

In the following section, we’ll review how to add Bootstrap to React apps.

How to add Bootstrap to React

The three most common ways to add Bootstrap to your React app are:

• Using the Bootstrap CDN
• Importing Bootstrap in React as a dependency
• Installing a React Bootstrap package such as React-Bootstrap or Reactstrap

Let’s go over each of these in more detail.

Adding Bootstrap using the Bootstrap CDN

The Bootstrap CDN is the easiest way to add Bootstrap to your React app. You just have to include a link to the CDN in the head section of your application entry file; no extra installation or downloads are required. In a typical React application created with Create React App, that would be in the public/index.html file.

Because we want to include the current stable version of Bootstrap, our link will look like this:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha256-2TnSHycBDAm2wpZmgdi0z81kykGPJAkiUY+Wf97RbvY=" crossorigin="anonymous">

If your project also requires using the JavaScript components that ship with Bootstrap, such as toggling a modal, dropdown, or navbar, we’ll need to link the bootstrap.bundle.min.js file, which comes precompiled with Popper.js.

We can do this by placing the following <script> tag near the end of our entry markup page, right before the closing </body> tag:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha256-gOQJIa9+K/XdfAuBkg2ONAdw5EnQbokw/s2b8BqsRFg=" crossorigin="anonymous"></script>

After linking the Bootstrap CSS and bundled Javascript CDNs, the complete code for our public/index.html file will look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Now you can start using the built-in Bootstrap classes and JavaScript components in your React app components.

Importing Bootstrap as a dependency

If you are using a build tool or a module bundler such as webpack or Vite, this will be the preferred option for adding Bootstrap to your React application. You can easily start the installation by running the following:

npm install bootstrap
# OR
yarn add bootstrap

This command will install the most recent version of Bootstrap. Once the installation is complete, we can include it in our app’s entry file:

// Bootstrap CSS
import "bootstrap/dist/css/bootstrap.min.css";
// Bootstrap Bundle JS
import "bootstrap/dist/js/bootstrap.bundle.min";

In the case of a project built with CRA or Vite, that would be in the src/index.js and src/main.js files, respectively. The entire file’s contents will look like this after the import:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

// Bootstrap CSS
import "bootstrap/dist/css/bootstrap.min.css";
// Bootstrap Bundle JS
import "bootstrap/dist/js/bootstrap.bundle.min";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

As shown in the code above, we’ve imported both Bootstrap CSS and its associated JavaScript file. We’ve also made sure to import Bootstrap before our main CSS file index.css so as to make it easier to alter Bootstrap’s default styling with this file as desired.

Once this process is complete, we can start using the built-in Bootstrap classes in our React app components.

Installing a React Bootstrap package such as React-Bootstrap or Reactstrap

The third way to add Bootstrap to a React app is to use a package that has prebuilt Bootstrap components designed to work as React components.

The benefit of this method is that practically all Bootstrap components are bundled as a React component in these libraries. For example, a full Bootstrap modal component can now be easily imported as <Modal /> in our React application.

While there are various packages you can use to install Bootstrap in React, the two most popular are React-Bootstrap and Reactstrap. These packages share very similar characteristics. We’ll go into detail about each package later in this tutorial.

Using built-in Bootstrap classes and components

Bootstrap can be used directly on elements and components in your React app by applying the built-in classes as you would any other class. To demonstrate the use of Bootstrap classes and components, let’s create a basic theme switcher React component:

As shown in this demo, we are using a dropdown component that is available in Bootstrap to implement our theme switcher. We are also using the built-in button classes to set the size and color of the dropdown button.

Now, let’s write the code for our theme switcher component. Ensure you have a React app already set up. In your src folder, create a new file called ThemeSwitcher.js for the component and add the following code snippet to it:

import { useState } from "react";
const ThemeSwitcher = () => {
  const [theme, setTheme] = useState(null);
  const resetTheme = () => {
    setTheme(null);
  };
  const themeClass = theme ? theme.toLowerCase() : "secondary";
  return (
    <>
      <div
        className={`text-capitalize h1 mb-4 w-100 text-center text-${themeClass}`}
      >
        {`${theme || "Default"} Theme`}
      </div>
      <div className="btn-group">
        <button className={`text-capitalize btn btn-${themeClass} btn-lg"`} type="button">
          {theme ? theme + " theme" : "Choose Theme"}
        </button>
        <button
          type="button"
          className={`btn btn-lg btn-${themeClass} dropdown-toggle dropdown-toggle-split`}
          data-bs-toggle="dropdown"
          aria-expanded="false"
        >
          <span className="visually-hidden">Toggle Dropdown</span>
        </button>
        <div className="dropdown-menu">
          <a className="dropdown-item" onClick={() => setTheme("primary")}>
            Primary Theme
          </a>
          <a className="dropdown-item" onClick={() => setTheme("danger")}>
            Danger Theme
          </a>
          <a
            className="dropdown-item" onClick={() => setTheme("success")}>
            Success Theme
          </a>
          <div className="dropdown-divider"></div>
          <a className="dropdown-item" href="#" onClick={() => resetTheme()}>
            Default Theme
          </a>
        </div>
      </div>
    </>
  );
};
export default ThemeSwitcher;

In the code above, we created a very simple theme switcher component using Bootstrap’s dropdown component and a few built-in classes.

Using React’s useState Hook, we created a state theme and set its initial value to null, as well as defined the setTheme method to modify this state. Then we created a resetTheme function that resets the theme’s value to null.

Next, in our component markup, we rendered a Bootstrap dropdown with four dropdown items. The first three items allow us to switch between different themes: primary, danger, and success, and the last dropdown item allows us to reset the theme value to null using the resetTheme() function.

In this example, we see how easy it is to use Bootstrap’s built-in classes and components in our React app. Now, to further understand how the React Bootstrap packages work, let’s recreate our theme switcher application using the components provided by React-Bootstrap and Reactstrap while writing limited code.

Customizing with React-Bootstrap

Assuming that you already have a React application set up, let’s install the React-Bootstrap package in our app with the following command:

npm install react-bootstrap bootstrap

It’s worth mentioning that React-Bootstrap doesn’t come pre-installed with Bootstrap itself. The package only exports common Bootstrap classes as React components, which is why we could also see Bootstrap appended in the installation command above.

Once we have React-Bootstrap installed, we are able to import any component. For example, importing the Button component would look like this:

import { Button } from 'react-bootstrap';

To continue with our theme switcher example, let’s create a new file named ThemeSwitcher.js in the src directory of our project and put the following contents in it:

import { useState } from "react";
import { Button, ButtonGroup, Dropdown } from "react-bootstrap";

const ThemeSwitcher = () => {
  const [theme, setTheme] = useState(null);

  const resetTheme = () => {
    setTheme(null);
  };

  return (
    <div className="mb-2">
      <Dropdown as={ButtonGroup} size="lg">
        <Button
          className="text-capitalize"
          variant={theme ? theme : "secondary"}
        >
          {theme ? theme : "Default"}
        </Button>
        <Dropdown.Toggle
          split
          variant={theme ? theme : "secondary"}
          id="dropdown-split-basic"
        />
        <Dropdown.Menu>
          <Dropdown.Item eventKey="1" onClick={() => setTheme("primary")}>
            Primary
          </Dropdown.Item>
          <Dropdown.Item eventKey="2" onClick={() => setTheme("danger")}>
            Danger
          </Dropdown.Item>
          <Dropdown.Item eventKey="3" onClick={() => setTheme("success")}>
            Success
          </Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item eventKey="4" onClick={resetTheme}>
            Default Theme
          </Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </div>
  );
};

export default ThemeSwitcher;

In the code above, we tried to replicate our initial example as much as possible using React-Bootstrap. We imported three components from the React-Bootstrap package; namely, Button, ButtonGroup, and Dropdown. And just like we did previously, we used the useState Hook to create our theme state and defined a function that set the value of theme to null.

Finally, we will modify the src/App.js file to look like the following:

import ThemeSwitcher from "./ThemeSwitcher";

function App() {
  return (
    <div className="App min-vh-100 d-flex justify-content-center align-items-center">
      <div>
        <ThemeSwitcher />
      </div>
    </div>
  );
}

export default App;

The only change we’ve made to this file is getting rid of the CRA starter page and making it render our ThemeSwitcher component instead.

Now, if we run the app with the command yarn start or npm start, it should start on port 3000 and should look like the following demo:

Customizing with Reactstrap

The Reactstrap package is quite similar to React-Bootstrap, with minor differences in things such as component and prop names. React-Bootstrap is a little older than Reactstrap, which may have contributed to its wider adoption range.

We can easily add Reactstrap to our React project with the command below:

npm install bootstrap reactstrap
# OR
yarn add bootstrap reactstrap

The code for our ThemeSwitcher component will look like this:

import { useState } from "react";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
} from "reactstrap";

const Theme = () => {
  const [theme, setTheme] = useState(null);
  const [dropdownOpen, setdropdownOpen] = useState(false);
  const resetTheme = () => {
    setTheme(null);
  };

  return (
    <div className="mb-2">
      <div
        className={`text-capitalize h1 mb-4 w-100 text-center text-${
          theme ? theme.toLowerCase() : "secondary"
        }`}
      >
        {`${theme || "Default"}`}
      </div>
      <div className="d-flex justify-content-center p-5">
        <Dropdown
          isOpen={dropdownOpen}
          toggle={() => setdropdownOpen(!dropdownOpen)}
        >
          <DropdownToggle color={theme} caret>
            Dropdown
          </DropdownToggle>
          <DropdownMenu>
            <DropdownItem onClick={() => setTheme("primary")}>
              Primary Theme
            </DropdownItem>
            <DropdownItem onClick={() => setTheme("danger")}>
              Danger Theme
            </DropdownItem>
            <DropdownItem onClick={() => setTheme("success")}>
              Success Theme
            </DropdownItem>
            <DropdownItem divider />
            <DropdownItem onClick={resetTheme}>Default Theme</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
    </div>
  );
};

export default Theme;

When comparing both code files from the Reactstrap and React-Bootstrap examples, particularly the action that triggers our dropdown toggle, we can see that Reactstrap leverages React Hooks to use React features more, while React-Bootstrap relies more on component properties.

If we run the app now with the command yarn start or npm start, our app should start on port 3000 and look like the following demo:

Creating a more detailed React app with Bootstrap

Now that we have our basic theme switcher, let’s try to use as many Bootstrap classes and components as possible to add more details to our app. We will also use Reactstrap to add Bootstrap to React.

Let’s start by creating a new app with Vite:

npm create vite@latest sample-app --template react

Next, install the dependencies as follows:

npm install axios bootstrap reactstrap

Notice that we installed Axios as a dependency. Axios is a promise-based HTTP client for the browser and Node.js. It will enable us to fetch posts from the Bacon Ipsum JSON API.

Let’s make a little modification to the src/index.js file to include the Bootstrap minified CSS and JavaScript files. It should look like the following snippet:

import React from "react";
import ReactDOM from "react-dom/client";
import App from './App.jsx'
import './index.css'

// Bootstrap CSS
import "bootstrap/dist/css/bootstrap.min.css";
// Bootstrap Bundle JS
import "bootstrap/dist/js/bootstrap.bundle.min";

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Next, we’ll create a new directory named components inside the src directory of our project. In this new components directory, create a file called Header.js and update it with the following contents:

import logo from '../logo.svg';

import {
  Container, Row, Col, Form, Input, Button, Navbar, Nav,
  NavbarBrand, NavLink, NavItem, UncontrolledDropdown,
  DropdownToggle, DropdownMenu, DropdownItem
} from 'reactstrap';

const AVATAR = 'https://www.gravatar.com/avatar/429e504af19fc3e1cfa5c4326ef3394c?s=240&d=mm&r=pg';

const Header = () => (
  <header>
    <Navbar fixed="top" color="light" light expand="xs" className="border-bottom border-gray bg-white" style={{ height: 80 }}>

      <Container>
        <Row g-0 className="position-relative w-100 align-items-center">

          <Col className="d-none d-lg-flex justify-content-start">
            <Nav className="mrx-auto" navbar>

              <NavItem className="d-flex align-items-center">
                <NavLink className="font-weight-bold" href="/">
                  <img src={AVATAR} alt="avatar" className="img-fluid rounded-circle" style={{ width: 36 }} />
                </NavLink>
              </NavItem>

              <NavItem className="d-flex align-items-center">
                <NavLink className="font-weight-bold" href="/">Home</NavLink>
              </NavItem>

              <NavItem className="d-flex align-items-center">
                <NavLink className="font-weight-bold" href="/">Events</NavLink>
              </NavItem>

              <UncontrolledDropdown className="d-flex align-items-center" nav inNavbar>
                <DropdownToggle className="font-weight-bold" nav caret>Learn</DropdownToggle>
                <DropdownMenu end>
                  <DropdownItem className="font-weight-bold text-secondary text-uppercase" header disabled>Learn React</DropdownItem>
                  <DropdownItem divider />
                  <DropdownItem>Documentation</DropdownItem>
                  <DropdownItem>Tutorials</DropdownItem>
                  <DropdownItem>Courses</DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>

            </Nav>
          </Col>

          <Col className="d-flex justify-content-xs-start justify-content-lg-center">
            <NavbarBrand className="d-inline-block p-0" href="/" style={{ width: 80 }}>
              <img src={logo} alt="logo" className="position-relative img-fluid" />
            </NavbarBrand>
          </Col>

          <Col className="d-none d-lg-flex justify-content-end">
            <Form inline>
              <Input type="search" className="mr-3" placeholder="Search React Courses" />
              <Button type="submit" color="info" outline>Search</Button>
            </Form>
          </Col>

        </Row>
      </Container>

    </Navbar>
  </header>
);

export default Header;

The component we just created in the snippet above is the Header component, which contains the navigation menu. Next, we will create a new file named SideCard.js — also in the components directory — with the following contents:

import { Button, UncontrolledAlert, Card, CardImg, CardBody, CardTitle, CardSubtitle, CardText } from "reactstrap";
const BANNER = "https://i.imgur.com/CaKdFMq.jpg";
const SideCard = () => (
  <>
    <UncontrolledAlert color="danger" className="d-none d-lg-block">
      <strong>Account not activated.</strong>
    </UncontrolledAlert>
    <Card>
      <CardImg top width="100%" src={BANNER} alt="banner" />
      <CardBody>
        <CardTitle className="h3 mb-2 pt-2 font-weight-bold text-secondary">
          Glad Chinda
        </CardTitle>
        <CardSubtitle
          className="text-secondary mb-3 font-weight-light text-uppercase"
          style={{ fontSize: "0.8rem" }}
        >
          Web Developer, Lagos
        </CardSubtitle>
        <CardText
          className="text-secondary mb-4"
          style={{ fontSize: "0.75rem" }}
        >
          Full-stack web developer learning new hacks one day at a time. Web
          technology enthusiast. Hacking stuffs @theflutterwave.
        </CardText>
        <Button color="success" className="font-weight-bold">
          View Profile
        </Button>
      </CardBody>
    </Card>
  </>
);
export default SideCard;

Once that’s done, create a file named Post.js in the components directory and add the following code snippet to it:

import { useState, useEffect } from "react";
import axios from "axios";
import { Badge } from "reactstrap";

const Post = () => {
  const [post, setPost] = useState(null);

  useEffect(() => {
    axios
      .get(
        "https://baconipsum.com/api/?type=meat-and-filler&paras=4&format=text"
      )
      .then((response) => setPost(response.data));
  }, []);
  return (
    <>
      {post && (
        <div className="position-relative">
          <span className="d-block pb-2 mb-0 h6 text-uppercase text-info font-weight-bold">
            Editor's Pick
            <Badge
              pill
              color="success"
              className="text-uppercase px-2 py-1 ml-3 mb-1 align-middle"
              style={{ fontSize: "0.75rem" }}
            >
              New
            </Badge>
          </span>

          <span className="d-block pb-4 h2 text-dark border-bottom border-gray">
            Getting Started with React
          </span>

          <article
            className="pt-5 text-secondary text-justify"
            style={{ fontSize: "0.9rem", whiteSpace: "pre-line" }}
          >
            {post}
          </article>
        </div>
      )}
    </>
  );
};

export default Post;

In the code above, we created a Post component that renders a post on the page. We initialized the component’s state by setting the post property to null.

After the component was mounted, we used the useEffect Hook and Axios to retrieve a random post of four paragraphs from the Bacon Ipsum JSON API, and changed our post field to the data returned from this API.

Finally, modify the src/App.js file to look like the following snippet:

import { Container, Row, Col } from "reactstrap";

import Post from "./components/Post";
import Header from "./components/Header";
import SideCard from "./components/SideCard";

const App = () => (
  <>
    <Header />

    <main className="my-5 py-5">
      <Container className="px-0">
        <Row
          g-0
          className="pt-2 pt-md-5 w-100 px-4 px-xl-0 position-relative"
        >
          <Col
            xs={{ order: 2 }}
            md={{ size: 4, order: 1 }}
            tag="aside"
            className="pb-5 mb-5 pb-md-0 mb-md-0 mx-auto mx-md-0"
          >
            <SideCard />
          </Col>

          <Col
            xs={{ order: 1 }}
            md={{ size: 7, offset: 1 }}
            tag="section"
            className="py-5 mb-5 py-md-0 mb-md-0"
          >
            <Post />
          </Col>
        </Row>
      </Container>
    </main>
  </>
);

export default App;

In the code above, we simply included the Header, SideCard, and Post components in the App component. Notice how we used a couple of responsive utility classes provided by Bootstrap to adapt our app to different screen sizes.

If you run the app now with the command yarn start or npm run dev, your app should start on port 5173 and look like this:

Customizing Bootstrap with Sass

One of the most notable drawbacks of using Bootstrap is that every app created with it tends to look the same. However, Bootstrap provides the option of customizing the appearance and feel of our app by overriding its default style and creating custom styling using a preprocessor like Sass.

Bootstrap provides access to a number of Sass variables that define its default styling attributes, such as colors, typography, spacing, and more. These variables can be overridden or customized to create a unique look and feel for our application. For example, we can change the primary color and font like this:

$primary-color: #007bff; // Change the primary color to blue
$font-family-sans-serif: 'Helvetica Neue', Arial, sans-serif; // Change the default font

To get started with Sass, install the compiler with the following command:

npm install -g sass

The Bootstrap team advises against modifying the core files, so we need to create a custom Sass stylesheet that imports Bootstrap. Therefore, the next step is to create a custom.scss file in the root directory of our project and import Bootstrap’s source files:

// Scss/custom.scss

// Include all of Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here
 ...

The Bootstrap file we are importing resides within the /node_modules/bootstrap directory, which is the directory housing the core Bootstrap files. Within this directory, you’ll find three subfolders: dist, js, and scss.

The dist folder contains all the compiled Sass files in CSS format, the js folder contains all of Bootstrap’s JavaScript files, and the scss file contains the Sass files with the default styles.

Bootstrap also offers the option of importing only the required Sass source files into our custom stylesheet, as opposed to importing the whole of Bootstrap:

// Scss/custom.scss

// Include function
@import "../node_modules/bootstrap/scss/functions";

// Include variables and mixins
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

The only distinction between the two methods above is that with the first method, i.e., importing the entirety of Bootstrap, functions will not be accessible. We’ll learn more about this later in this section.

After creating the custom scss file, your project’s file structure should look like the following:

├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

With the setup in place, we can now begin modifying our Bootstrap styles. But first, we need to understand how Bootstrap styles are arranged and how to define custom variables.

Bootstrap allows users to override Sass properties such as variables, functions, maps, etc. However, there is a specific order that must be followed when modifying these properties in a custom Sass file.

For example, custom variables must be defined before the import statements in the file, except for the function import statement, which must be defined before, or above, declared custom variables. So, if we were to put the example from earlier into our custom.scss file, it would be arranged as follows:

// Scss/custom.scss

// Include functions
@import "../node_modules/bootstrap/scss/functions";

// Custom variables
$primary-color: #007bff; 
$success: #ff0000;
$font-family-sans-serif: 'Helvetica Neue', Arial, sans-serif; 

// Import variables
@import "../node_modules/bootstrap/scss/variables";

If we were to use the method of importing the entirety of the Bootstrap utilities, we would not be able to modify functions in our custom file. This is because the imported file will overwrite the functions.

Every Sass variable in Bootstrap is prefixed with a !default flag, which allows us to override the value without modifying the source code. The example above changes the theme’s primary color and font. The list of Bootstrap’s variables can be found in the \node_modules\bootstrap\scss_variables.scss directory of your project. Edit the variables accordingly to change the theme’s appearance.

In addition to overriding variables, we can also write custom styles to further modify the appearance of specific elements or components using Sass maps. With maps, we can write custom styles such as the following and merge them with an existing map:

// Create a custom map
$custom-colors: (
  "custom-color": #900
); 

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

Here, we’re using the map-merge method to merge our custom map with the existing $theme-colors map. To see our custom styles in action, we must first compile the custom.scss file and replace the Bootstrap CSS we imported into main.jsx earlier with the compiled output file.

This is the command for compiling our Sass file:

sass ./scss/custom.scss ./src/css/custom.css

This command will compile the output CSS file into a CSS folder within the src directory in your project:

Next, replace the Bootstrap CSS import inside the main.js file with the compiled custom.css file like so:

// Bootstrap CSS
import "./css/custom.css";

// Bootstrap Bundle JS
import "bootstrap/dist/js/bootstrap.bundle.min";

We didn’t use the progress variable anywhere in our application. The success variable, however, is used to define the color of both the button and badge components on the page. If you return to your web browser, you will see that they have now taken on the red color specified in our custom Sass file:

With this knowledge, you can tailor your application’s design to your liking without any limitations. Please refer to the documentation for more information on Bootstrap customization with Sass.

Creating a responsive layout using the Bootstrap grid system

In the previous section, we employed a set of utility classes to adapt our app to different screen sizes. These utility classes are parts of the Bootstrap grid system, which is a utility that allows us to create responsive and adaptable layouts. It is based on a 12-column flexbox grid, which can be customized to create layouts of varying complexity:

Bootstrap uses a series of containers, rows, and columns elements that work together to align content on different screen sizes.

container

In Bootstrap, the container element is essential for grid layouts because it houses other grid elements. Bootstrap offers two containers: container with a fixed, centered width for standard layouts, and container-fluid for full-width layouts.

row

The row element, used within the container element, forms horizontal containers for columns, ensuring proper alignment and equal height.

column

The column element is the primary building block of the grid system. It is placed inside rows and defines how much horizontal space each item occupies. The columns are designated by the col- class, which is followed by a number from one to 12. For example, col-6 will create a column that spans half the width of its parent row:

Bootstrap also provides responsive breakpoint classes that allow you to control the layout of columns at different screen sizes. These classes are typically applied alongside the col- classes:

• col-sm-: Applies to small screens, with a minimum width of 576px
• col-md-: Applies to medium screens, with a minimum width of 768px
• col-lg-: Applies to large screens, with a minimum width of 992px
• col-xl-: Applies to extra-large screens, with a minimum width of 1200px

Here’s a simple example of a Bootstrap grid layout:

<div class="container">
  <div class="row">
    <div class="col-md-4">Column 1</div>
    <div class="col-md-4">Column 2</div>
    <div class="col-md-4">Column 3</div>
  </div>
</div>

In this example, we have a container that holds a row with three columns. On medium sized screens and larger, each column occupies four out of 12 available columns, creating a three column layout:

Auto-layout

Alternatively, Bootstrap offers an auto-layout feature that enables users to create responsive layouts without specifying the exact widths of columns. In an auto-layout, columns with a col class will automatically size themselves to be equal width within the same row. This means that if you have three columns with col classes inside a row, each will take up an equal portion of the available width:

<div class="container">
  <div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
  </div>
</div>

In this example, the output reflects the previous one: all three columns are of equal width, each occupying one-third of the row:

Upon closer inspection, you’ll notice that we used a slightly different syntax when creating our columns. This is because the col element in React is a component from the React-Bootstrap library that receives its responsive classes as props:

<Container className="px-0">
          <Row
            g-0
            className="pt-2 pt-md-5 w-100 px-4 px-xl-0 position-relative"
          >
            <Col
              xs={{ order: 2 }}
              md={{ size: 4, order: 1 }}
              tag="aside"
              className="pb-5 mb-5 pb-md-0 mb-md-0 mx-auto mx-md-0"
            >
              <SideCard />
            </Col>
            <Col
              xs={{ order: 1 }}
              md={{ size: 7, offset: 1 }}
              tag="section"
              className="py-5 mb-5 py-md-0 mb-md-0"
            >
              <Post />
            </Col>
          </Row>
        </Container>

In this example, we used the Container, Row, and Col components from the React-Bootstrap library to structure our grid. We also specified the column widths using the xs (extra small) and md (medium) props.

There are 12 columns in this grid, and each column takes up 4 and 7 columns on medium sized screens, respectively:

On extra small screens, each column spans the entire row, but with an ordering of 2 and 1, respectively. This means that the first column appears after the second column on extra small screens, and the second one appears before the first.

Finally, this is how our responsive grid layout will look on different screens:

Conclusion

In this tutorial, we explored a few different ways in which we can integrate Bootstrap with our React apps. We also learned how to use two of the most popular React Bootstrap libraries, React-Bootstrap and Reactstrap, to build responsive layouts and streamline the development process.

We have only used a few Bootstrap components in this tutorial, including alerts, badges, dropdowns, navbars, navs, forms, buttons, and cards. There are still a few Bootstrap components you can experiment with, such as tables, modals, tooltips, carousel, jumbotron, pagination, and more.

Check out the documentation of the packages we used in this tutorial to find out more ways they can be used. The source code for all the demo apps in this tutorial can be found on GitHub.