React Bootstrap: Empowered Bootstrap with React

5 min readNov 22, 2023

React Bootstrap

React Bootstrap is an integration kit that enables the use of Bootstrap, a popular UI (User Interface) component library, within React applications. React Bootstrap is a complete reimplementation of Bootstrap components using React. It doesn’t rely on Bootstrap.js or jQuery. If you have React installed and React-Bootstrap loaded, you have everything you need.

Methods and events using JsDom or jQuery are necessarily performed by directly manipulating the DOM. In contrast, React utilizes state updates to update the virtual DOM. Thus, React-Bootstrap provides a more reliable solution by incorporating Bootstrap functionality into React’s virtual DOM.

To use React Bootstrap, you need to add the relevant package to your React application and use the components according to the documentation. After adding React Bootstrap to your project dependencies, you can incorporate the desired design into your application using the components provided in examples or documentation.

Advantages

Component-Based Structure: React is a component-based JavaScript library. React Bootstrap is built upon this component-based structure. Components represent different parts of your user interface and provide reusability. React Bootstrap enables you to integrate Bootstrap components into your applications as React components. For instance, a Button component can be easily created and utilized with React Bootstrap.
Making Bootstrap Components React-Compatible: Bootstrap is a popular UI framework that includes many useful components. However, Bootstrap, in its original form, cannot be directly used in React projects. React Bootstrap makes Bootstrap components React-compatible and allows you to leverage the advantages of these components as React components. For example, using state management in React components, you can create dynamic and interactive components.
Documentation and Examples: React Bootstrap offers comprehensive documentation and examples to facilitate users in getting started with their projects. The documentation explains how to set up React Bootstrap, the features of the components to be used, and how to use them. Examples showcase typical usage scenarios and can serve as a starting point. Thus, integrating React Bootstrap into your project and utilizing the components correctly becomes more straightforward.
Responsive Design: One of Bootstrap’s key features is supporting responsive design. This feature ensures that your application displays seamlessly on different devices and screen sizes. React Bootstrap preserves Bootstrap’s responsive features and assists in creating a responsive user interface when used in conjunction with React components.
Easy Customization: In addition to using Bootstrap components, React Bootstrap allows customization of these components. You can easily alter the appearance and behavior of components using Bootstrap’s CSS classes and customization options. Furthermore, leveraging React’s features enables you to programmatically manage the components’ state and behavior.

By bringing together React and Bootstrap, React Bootstrap offers a robust user interface creation experience. React’s component-based structure makes Bootstrap components more modular and enables the creation of a more interactive and dynamic user interface using React’s powerful features.

How can we include it in our project?

Open the terminal in your project directory and enter the installation command according to the package manager you are using. Then, after the installation process is complete, place the following import command into index.js or App.js.

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

// The following line can be included in your src/index.js or App.js file

import 'bootstrap/dist/css/bootstrap.min.css';

Now that we have added it to our project, we can start using both the bootstrap and react-bootstrap features.

For example, let’s say you want to create a button element. First, import the Button component from React-Bootstrap on your relevant page. Then, within the same page, you can call and use the Button component.

import Button from 'react-bootstrap/Button';

function MyButtonComp() {
  return (
    <>
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="success">Success</Button>
      <Button variant="warning">Warning</Button>
      <Button variant="danger">Danger</Button>
      <Button variant="info">Info</Button>
      <Button variant="light">Light</Button>
      <Button variant="dark">Dark</Button>
      <Button variant="link">Link</Button>
    </>
  );
}

export default MyButtonComp;

The Button component encompasses the properties of the HTML button element. It also includes the CSS properties of the btn class. Additionally, through React props logic, you can add extra properties to the Button component. The prop names that React-Bootstrap components accept are fixed and can be learned from the documentation. You can click here for the Button example or examine the relevant component inside the node_modules/react-bootstrap folder (I recommend checking the documentation).

Examples of Responsive Grid Structure:

Setting Responsive Width with Col:

Col allows you to set column widths at 6 breakpoints (xs, sm, md, lg, xl, and xxl). You can specify the number of columns to spread for each breakpoint. (You provide the measurement based on standard bootstrap logic. For instance, col-sm-8 is equivalent to sm={8}. Therefore, you set the value according to how much space you want the column to occupy in that row.)

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

function ResponsiveAutoExample() {
  return (
    <Container>
      <Row>
        <Col sm={8} md={6} lg={4}>sm=8-md=6-lg=4</Col>
        <Col sm={8} md={6} lg={4}>sm=4</Col>
      </Row>
    </Container>
  );
}

export default ResponsiveAutoExample;

2. Setting Column Widths within Row for Responsive Layout:

Row allows you to set column widths at 6 breakpoints (xs, sm, md, lg, xl, and xxl). You can determine the number of columns to display side by side for each breakpoint. (You assign the value based on the number of columns you want to display in a row. For example, display 2 on xs screens, 4 on md screens, and 6 on lg screens and beyond.)

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

function RowColLayoutExample() {
  return (
    <Container>
      <Row xs={2} md={4} lg={6}>
        <Col>1 of 2</Col>
        <Col>2 of 2</Col>
      </Row>
      <Row xs={1} md={2}>
        <Col>1 of 3</Col>
        <Col>2 of 3</Col>
        <Col>3 of 3</Col>
      </Row>
    </Container>
  );
}

export default RowColLayoutExample;

Default 6 Breakpoints:

| Breakpoint           | Class infix | Dimensions |
|----------------------|-------------|------------|
| X-Small              | xs          | <576px     |
| Small                | sm          | ≥576px     |
| Medium               | md          | ≥768px     |
| Large                | lg          | ≥992px     |
| Extra large          | xl          | ≥1200px    |
| Extra extra large    | xxl         | ≥1400px    |

In conclusion, React Bootstrap provides an excellent integration for developers who want to use Bootstrap’s powerful UI components in React applications. Its component-based structure modularizes projects and enables the creation of interactive user interfaces using React’s capabilities. Additionally, comprehensive documentation and examples simplify learning React Bootstrap and integrating it into projects. The responsive design features and easy customization options ensure smooth operation of your applications on various screen sizes. React Bootstrap is a reliable tool for Full Stack developers aiming to develop modern web applications.