Bootstrap with React

Anyone who is familiar with web design and development knows about Bootstrap. Bootstrap is one of the most powerful framework for building responsive, mobile-first websites. Bootstrap allows you to use pre-made components, which reduces your development time even further. All you need to do is to import Bootstrap, add some Javascript files and you are good to go.

You can even customize the component’s appearance by passing either Bootstrap’s built-in color classes, or you can specify your own custom classes as well.

React on the other hand, is a component based Javascript framework, which allows you to separate different functionalities into different components and combine them to create complex UI. React uses XML-like syntax, called JSX, which allows you to write HTML and Javascript together.

In this blog article, we are going to see how you can install Bootstrap for react, and use it to create beautiful, responsive UI. We will also look at different components available to us.

So, let’s get started.

1. React-bootstrap installation

This article assumes that you already know how to install and create React app. If you don’t know, you can follow it here.

Open CMD in already created React app, and write the following and press ENTER.

npm install react-bootstrap bootstrap

This will install and add React-Bootstrap to your React app.

Next, you will need to add following lines of code to the end of the index.js file.

<>
<script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script>

<script
  src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
  crossorigin></script>

<script
  src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
  crossorigin></script>

</>

And lastly, you will need to add the following link tag to head section of index.html.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
  integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
  crossorigin="anonymous"
/>

Doing all of the steps mentioned above, will ensure proper working of Bootstrap in your project. To confirm this, we will run npm start in CMD.

I have removed unnecessary files from the react app, and removed logo, cleared css files. The only classes I am using in the above picture is from Bootstrap, which is displayed in the following picture.

The classNames, bg-dark refers to the dark background, rounded refers to rounded borders, text-white means that the text will be white, p-2 means padding of 2 from all sides, and mt-1 means margin-top of 1. All of these classes are from Bootstrap.

Importing Components

You should only import components that you would like to use, instead of importing the entire library. To do so, you need to do the following:

import Button from 'react-bootstrap/Button';

and use as you are using a component in React. 

<Button> Click Me! <Button>

Doing the above, will only import Button component. The complete list of Bootstrap’s components is given here.

2 React-Bootstrap Container

Containers are the most basic layout component in Bootstrap. A container can be used to contain element, give padding, and to center the content within it.

Types of Containers:

• Container
• Fluid Container

Container

Container is a responsive, fixed-width container, meaning its max-width changes at each breakpoint.

The complete detail of container widths is given here.

Fluid Container

Fluid containers is a full width container, spanning the entire width of the viewport.

3 React-Bootstrap Row

Bootstrap’s rows are wrappers for columns ( cols ) in the grid system.

4 React-Bootstrap Columns

Bootstrap columns are incredibly flexible. They allow you to create different combinations for different screen sizes. You can create up to 12 template columns. Anything greater than 12 will result in your columns, moving to the next line.

In the above code example, I have designed three columns layout. Total template columns add up to 12. The term {md} means that on medium size screen, it will have value of 4.

Summary for the Grid System

Container wraps up rows (Row), and rows in turn wraps up the columns (Col). This ensures proper working of the different components, and works exactly as it is intended to.

Now that we have seen how we should set up out React and Bootstrap project, we will now move on to different components that are available to us.

5 React-Bootstrap Components

Card

A card is a flexible and extensible content container. It includes options for a wide variety of content, header and footer options. Cards are built using minimal code, but provides customization as per your needs.

import Container from 'react-bootstrap/Container';
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";


function App() {
  return (
    <Container className='container'>
    <div className='App'>
    <Card style={{ width: '18rem' }}>
      <Card.Body>
        <Card.Title>Card Title</Card.Title>
        <Card.Text>
          Card Description
        </Card.Text>
        <Button variant="primary">Link</Button>
      </Card.Body>
    </Card>
    </div>
    </Container>
  );
}

Code for the Card Component.

React Bootstrap Accordion

We can build Build vertically collapsing accordions in combination with the Collapse component using react bootstrap.

import './App.css';
import Container from 'react-bootstrap/Container';
import Accordion from "react-bootstrap/Accordion"

function App() {
  return (
    
    <Container className='container'>
    <div className='App'>
    <Accordion defaultActiveKey="0">
      <Accordion.Item eventKey="0">
        <Accordion.Header>Accordion Item #1</Accordion.Header>
        <Accordion.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        </Accordion.Body>
      </Accordion.Item>
      <Accordion.Item eventKey="1">
        <Accordion.Header>Accordion Item #2</Accordion.Header>
        <Accordion.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        </Accordion.Body>
      </Accordion.Item>
    </Accordion>

    </div>
    </Container>
  );
}

export default App;

Code for the Accordion

You can change the background, text color, using Bootstrap classes.

Buttons

React Bootstrap comes with beautiful designs for simple looking buttons. You can use variant property to use different color themes available for buttons. For example, you can use variant=”success” and it will render out a beautiful green button with white text.

import './App.css';
import Container from 'react-bootstrap/Container';
import Button from 'react-bootstrap/Button';

function App() {
  return (
    
    <Container className='container'>
    <div className='App'>
    <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>

    </div>
    </Container>
  );
}

export default App;

Icons in React Bootstrap

Bootstrap icons comes with 1600+ free, open source icons library that you can use in your React project. To get started with using icons, you will need to run:

npm install react-bootstrap-icons --save

Doing so, will add the icons library to your React project and you can now easily add icons in your project. Now, to use the icons:

import { ArrowRight } from 'react-bootstrap-icons';

export default function App() {
  return (
      <ArrowRight size={50}/>
);
}

Modals

React Bootstrap also comes with the ability to add dialogue boxes to your site for notifications, or completely custom content. Modals are positioned on top of everything else in the document and remove scroll from the <body> so only modal content scrolls.

import './App.css';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import {useState} from "react";

function App() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Launch demo modal
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

export default App;

Code for the Modal.

Forms

import './App.css';
import Container from 'react-bootstrap/Container';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';

function App() {
  return (
    <Container>
     <Form>
      <Form.Group className="mb-3" controlId="formBasicEmail">
        <Form.Label>Email address</Form.Label>
        <Form.Control type="email" placeholder="Enter email" />
        <Form.Text className="text-muted">
          We'll never share your email with anyone else.
        </Form.Text>
      </Form.Group>

      <Form.Group className="mb-3" controlId="formBasicPassword">
        <Form.Label>Password</Form.Label>
        <Form.Control type="password" placeholder="Password" />
      </Form.Group>
      <Form.Group className="mb-3" controlId="formBasicCheckbox">
        <Form.Check type="checkbox" label="Check me out" />
      </Form.Group>
      <Button variant="primary" type="submit">
        Submit
      </Button>
    </Form>
  </Container>
);

}

export default App;

Navbar in React Boostrap

Navbar is a powerful, responsive navigation header. It includes support for branding, navigation, and more. Which means you can put your logo, and navigation items, and it will handle the rest.

import './App.css';
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';

function App() {
  return (
    <>
      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
      <br />
      <Navbar bg="primary" variant="dark">
        <Container>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
          </Nav>
        </Container>
      </Navbar>

      <br />
      <Navbar bg="light" variant="light">
        <Container>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
    </>
  );

}

export default App;

Creating Tables using React Bootstrap

Creating a table in Bootstrap is really straight forward. Table comes with many props, such as Striped, Bordered, and Hover, to help you customize your table as per your needs.

import './App.css';
import Container from 'react-bootstrap/Container';
import Table from 'react-bootstrap/Table';
function App() {
  return (
    <Container>
    <Table striped bordered hover>
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Wilson</td>
        <td>@mark</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Anderson</td>
        <td>@JAnder</td>
      </tr>
      <tr>
        <td>3</td>
        <td colSpan={2}>Larry the Bird</td>
        <td>@Bird</td>
      </tr>
    </tbody>
  </Table>
  </Container>
);

}

export default App;

6 Conclusion

Now that you have seen how easy is to install and use Bootstrap in your own React project. As mentioned above, you will need to run few command and it will be ready to use as you want it. Many components available for you to use, such as Cards, Navbars for navigation, Form fields for getting input from users and so on.

You can also customize any component as per your needs, using many utility classes for margin, padding, colors, etc. So, anything you want to do, you can do so. You can also use custom CSS as well.

Everything we have seen till now is responsive on all size screens. It doesn’t matter if the person is using desktop, mobile or laptop, it will adjust and render according to the screen size.