TheLazy.Dev
Portfolio GitHub

Blog

webdev |javascript |react |bootstrap

Bootstrap with React: The Complete Guide

alakkadshaw

alakkadshaw

Posted on June 15, 2023

Bootstrap with React: The Complete Guide

This is a comprehensive guide to using bootstrap with React JS.

In this guide, we are going to learn the following

  1. Different ways to install BootStrap with React

  2. Creating a Sample Project with BootStrap and React

  3. Different examples and Unique use-cases of using BootStrap with React

  4. How to Troubleshoot Bootstrap with reactjs is not working

  5. Conclusion

1. Different ways of installing BootStrap with React

In this section we will explore the different ways you can add bootstrap to your reactjs project

i Using CDN

one of the easiest ways of adding bootstrap to react project is by using the cdn

To add bootstrap using CDN, copy the CDN url and open the 'public/index.html' file in your Reactjs project

there are some drawbacks to adding bootstrap via CDN like

  1. Doesn't allow for component based usage of bootstrap elements

  2. It is not as seamless as other methods

  3. Creates bloat as classes that are not in use are still added to the project

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
Enter fullscreen mode Exit fullscreen mode

and js

https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js
Enter fullscreen mode Exit fullscreen mode

ii Using npm or yarn

you can easily add bootstrap to your react js project using npm or yarn install and import it into your 'src/index.js' file

npm install bootstrap
Enter fullscreen mode Exit fullscreen mode

then in your 'src/index.js' add the following like to

import 'bootstrap/dist/css/bootstrap.min.css';
Enter fullscreen mode Exit fullscreen mode

iii Using React Bootstrap

React bootstrap is a version of bootstrap that has been built for bootstrap from the ground up

React Bootstrap allows you to use bootstrap as a react component, thus it is a react friendly way of using bootstrap

npm install react-bootstrap bootstrap
Enter fullscreen mode Exit fullscreen mode

then import it in your file as 'src/index.js'

import 'bootstrap/dist/css/bootstrap.min.css';
Enter fullscreen mode Exit fullscreen mode

and in your component file import the specific React Bootstrap components that you need

import Button from 'react-bootstrap/Button';
Enter fullscreen mode Exit fullscreen mode

iV Using Reactstrap

The Reactstrap is a library that provides bootstrap components that can be used in a react application

you can easily install reactstrap using npm like

npm install --save reactstrap react react-dom
Enter fullscreen mode Exit fullscreen mode

and in your component file import the Reactstrap bootstrap components like

import {Button} from 'reactstrap';
Enter fullscreen mode Exit fullscreen mode

2. Using a Sample project with Bootstrap and React

let us create a sample project with bootstrap and react.

a. Setting up the environment

We need npm and node js installed on the machine. Then create a react application using the npx create-next-app or any other react powered framework then cd into your project folder name the project folder sample-react-bootstrap app

npx create-next-app
Enter fullscreen mode Exit fullscreen mode

b. Importing bootstrap into your react application

Once you have created a react application then you can import bootstrap css in your 'src/index.js' file

import 'bootstrap/dist/css/bootstrap.min.css';
Enter fullscreen mode Exit fullscreen mode

c. Using bootstrap components in your react application

React bootstrap provides a variety of components like Buttons, Forms etc To use these components simply import them into your component like so

In your 'src/App.js'

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

function App() {
  return (
    <div className="App">
      <Button variant="primary">Reload</Button>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

In the above example we are importing the button component and then using the component in the App component

d. Customizing Bootstrap

one of the simplest and most powerful features of Bootstrap components is their ability to customize

each bootstrap component is made from smaller components like Button and thus makes it easy to customize it according to your needs

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

function App() {
  const AppStyleButton = {
    backgroundColor: 'blue',
    margin: '10px 10px'
  };

  return (
    <div className="App">
      <Button style={AppStyleButton}>Reload</Button>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

e. Building a responsive design with Bootstrap Grid System

Bootstrap's grid system allows for a flexible and responsive layout.

this is how you can use the grid system in the react-bootstrap

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

function App() {
  return (
    <Container>
      <Row>
        <Col xs={12} md={9}>
          <div className="content">Main Content Area</div>
        </Col>
        <Col xs={6} md={3}>
          <div className="sidebar">Sidebar area</div>
        </Col>
      </Row>
    </Container>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

In this example we can create a responsive layout using the 'Container' , 'Row' and 'Col' components

we have assigned the xs (extra small) screen size to the main content (12) and distributed the main content and the sidebar when the area is of medium size or bigger

3. Different examples and Unique use-cases of using BootStrap with

In this section, we will look at different examples of using bootstrap with react

Example1: Modal

In this example, we will be creating a modal with bootstrap and react, and we will be using react hooks to control the visibility of the modal

consider the below code:

the index.js file:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "bootstrap/dist/css/bootstrap.min.css";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);
Enter fullscreen mode Exit fullscreen mode

the App.js file:

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

export default function Example() {
  const [show, setShow] = useState(false);

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

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Make modal visible
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Title of the Modal </Modal.Title>
        </Modal.Header>
        <Modal.Body>Text inside of a Modal </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            close the modal
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

Thus in this example we have made a modal with bootstrap and reactjs

Let us look at another example the navbar with bootstrap and react

Example 2: Navbar with react and bootstrap

Navbar is a common design feature in websites and needs to be responsive across devices. In this example we will be building a responsive navbar with react and bootstrap

consider the below code:

import React from "react";
import { Navbar, Nav, NavDropdown } from "react-bootstrap";

export default function Example() {
  return (
    <Navbar bg="light" expand="lg">
      <Navbar.Brand href="#home">React-Bootstrap Nav Bar</Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="mr-auto">
          <Nav.Link href="#home">Home</Nav.Link>
          <Nav.Link href="#about">about</Nav.Link>
          <NavDropdown title="list of services" id="basic-nav-dropdown">
            <NavDropdown.Item href="#action/3.1">Some service</NavDropdown.Item>
            <NavDropdown.Item href="#action/3.2">
              Some other service
            </NavDropdown.Item>
            <NavDropdown.Item href="#action/3.3">
              some service we offer
            </NavDropdown.Item>
            <NavDropdown.Divider />
          </NavDropdown>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
}
Enter fullscreen mode Exit fullscreen mode

and add the css files in index.js file like

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "bootstrap/dist/css/bootstrap.min.css";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);
Enter fullscreen mode Exit fullscreen mode

Thus in this example we learnt how to create a Nav bar with react bootstrap

Let us consider one last example:

Example 3: Form with BootStrap and react.

In this example we are going to create a form with bootstrap and react.

Let us consider the below code

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

export default function Example() {
  const [validated, setValidated] = useState(false);

  const handleSubmit = (event) => {
    const form = event.currentTarget;
    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    }
    setValidated(true);
  };

  return (
    <Form noValidate validated={validated} onSubmit={handleSubmit}>
      <Form.Group controlId="validationCustom01">
        <Form.Label> what is your Name</Form.Label>
        <Form.Control required type="text" placeholder="What is your Name" />
        <Form.Control.Feedback type="invalid">
          Please provide your name
        </Form.Control.Feedback>
      </Form.Group>
      <Button type="submit">Send the form</Button>
    </Form>
  );
}
Enter fullscreen mode Exit fullscreen mode

and add the css in the index.js file

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "bootstrap/dist/css/bootstrap.min.css";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);
Enter fullscreen mode Exit fullscreen mode

4. How to troubleshoot if Bootstrap with React is not working

Here are some of the ways you can troubleshoot if Bootstrap is not working in your react js project

  1. Bootstrap CSS is not imported: You need to import the bootstrap css in your  'index.js' file like 
import 'bootstrap/dist/css/bootstrap.min.css';
Enter fullscreen mode Exit fullscreen mode

2. Incorrect Installation: make sure you have installed Bootstrap or react-bootstrap properly in your application. You can directly add Bootstrap via CDN or npm install it as well

3. Using components without importing them:  

Check if you have imported the components properly when using them. You need to import the components before using them like for example here we are importing a Button component before using it in the component

import Button from 'react-bootstrap/Button';

<Button variant="secondary" onClick={handleClose}>
    close the modal
</Button>
Enter fullscreen mode Exit fullscreen mode

You can also debug why bootstrap is not working using console.log and react dev tools and check whether the library has been successfully installed or not

5. Conclusion

Integrating Bootstrap with react is easy as well as powerful in helping you design applications and web pages

In this article, we have discussed multiple ways to integrate Bootstrap with react js including ways like adding Bootstrap through CDN, installing Bootstrap via npm

Then we created a sample application with react js and Bootstrap and understood how to add Bootstrap to a react js project

After that we considered three examples of using Bootstrap with reactjs and example 1 we built a Modal with react js and Bootstrap and in example 2 we built a dropdown with reactjs and Bootstrap and in example 3 we built the Form with react js and Bootstrap

Lastly, we understood how to trouble shoot when Bootstrap is not working with react js  

Thank you for reading the article.

Note: This article was originally written on the DeadSimpleChat Blog: Bootstrap with React: The Complete Guide

💖 💪 🙅 🚩
alakkadshaw
alakkadshaw

Posted on June 15, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Bootstrap with React: The Complete Guide
webdev Bootstrap with React: The Complete Guide

June 15, 2023