This is a comprehensive guide to using bootstrap with React JS.
In this guide we are going to learn the following
- Different ways to installing BootStrap with React
- Creating a Sample Project with BootStrap and React
- Different examples and Unique use-cases of using BootStrap with React
- How to Troubleshoot Bootstrap with reactjs is not working
- 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
- Doesn't allow for component based usage of bootstrap elements
- It is not as seamless as other methods
- Creates bloat as classes that are not in use are still added to the project
If you are looking for a React Native Chat SDK to build in app chat messaging application, you can consider DeadSimpleChat React Native SDK
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">and js
https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.jsii 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 bootstrapthen in your 'src/index.js' add the following like to
import 'bootstrap/dist/css/bootstrap.min.css';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 bootstrapthen import it in your file as 'src/index.js'
import 'bootstrap/dist/css/bootstrap.min.css';and in your component file import the specific React Bootstrap components that you need
import Button from 'react-bootstrap/Button';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-domand in your component file import the Reactstrap bootstrap components like
import {Button} from 'reactstrap';
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
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';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;
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;
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;
In this example we can create a responsive layout using the 'Container' , 'Row' and 'Col' components
we have assigned the xs (extra small) screeen size to 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>
);
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>
</>
);
}
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>
);
}
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>
);
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>
);
}
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>
);
4. How to troubleshoot is 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
- 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';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>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, install 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.