Using Bootstrap 5 with React JS

Written : 2021-04-19 Last Update : 2023-04-19

Using Simply CSS

A blog about using the latest Bootstrap 5 with react JS in CSS style. I am not going to use react-bootstrap as it is still in alpha ( on the day of writing this ).

Setting Up

Will create a project , add bootstrap and add sass to customize bootstrap.

 npx create-react-app bootstrap5-react
 npm i bootstrap
 npm i sass

Now in our src folder, we will create a main.scss file and add the following overrite to it.

 /* make the customizations */
 $primary : #2f24c8;
 
 
 /* import bootstrap to set changes */
 @import "../node_modules/bootstrap/scss/bootstrap.scss";

Now, import this scss on top in your index.js file.

 import './main.scss';

I will simply add the following code to show that our bootstrap setup along with variable overite is working correctly.

 import './App.css';
 
 function App() {
     return (
         <div className="container text-center py-5">
             <div className="card p-3">
                 <h1>Welcome</h1>
                 <h3>Using Bootstrap 5 with React JS.</h3>
             </div>
         </div>
     );
 }
 
 export default App;

Using React Bootstrap

I am going to use react-bootstrap's current version v2.0.0-beta.6 (Bootstrap 5.1).

Although it is in beta , I will be using it as it uses Bootstrap 5.1. In my last blog post, I talked about using Bootstrap 5 with css, but it will cause some issues when You use Bootstrap's JS components with React, such as alerts.

It's kind of the same process for setting up, just need to add an extra react-bootstrap.

 npm install react-bootstrap@next bootstrap@5.1.0

Adding Saas to customize Bootstrap.

 
 /* make the customizations */
 $primary : #2f24c8;
 
 /* import bootstrap to set changes */
 @import "../node_modules/bootstrap/scss/bootstrap.scss";

I haven't really dig deeper or worked on any experimental/real project that involves react and react-bootstrap@5.1, but the best part is a lot of customization is available using className and other are simply available via documentation.

Some code from App.js.

  import { useState } from "react";
  import { Button, Container, Alert, Form, Row, Col } from "react-bootstrap";
 
  function App() {
    return (
      <div>
        <Container className="p-4">
          <Row className='align-items-center justify-content-center'>
            <Col sm md lg="4">
              <Form>
                <AlertDismissibleExample></AlertDismissibleExample>
                <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>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
  function AlertDismissibleExample() {
    const [show, setShow] = useState(true);
    if (show) {
      return (
        <Alert variant="danger" onClose={() => setShow(false)} dismissible>
          <Alert.Heading>Oh snap! You got an error!</Alert.Heading>
          <p>
            Wrong Credentials.
          </p>
        </Alert>
      );
    }
    return <></>;
  }
  export default App;