ReactJS - Bootstrap

Bootstrap is a popular CSS framework used by the front-end developer around the world. Bootstrap provides an excellent support for designing web pages through its flexible, responsive and high performance utility CSS components. Bootstrap also provides a large collection of jQuery based UI components.

Using bootstrap CSS and JavaScript components, front-end developer can design beautiful webpages along with responsive support for any devices. React can be used along with Bootstrap and get all benefits of Bootstrap in their web application. Let us see how to integrate Bootstrap into React application in this chapter.

Integrating Bootstrap

Bootstrap can be integrated into React application through multiple ways. If a developer wants to use only CSS features from the bootstrap library, then the developer can import the bootstrap library through CDN and use the bootstrap CSS class in the required places.

If a developer wants to use Bootstrap JavaScript library, then the developer can either use react components wrapped around the original bootstrap jQuery component or special react UI library designed to exploit the features of bootstrap library.

Below is the list of options to integrate bootstrap library into React application.

  • Link tag (CSS only).

  • import feature (CSS only).

  • Link tag (Bootstrap + jQuery UI).

  • Wrapper react component.

  • Native react bootstrap component.

Link tag (CSS only)

Let us learn how to apply link tag by creating a react application in this chapter. First of all, create a new react application and start it using below command.

create-react-app myapp
cd myapp
npm start

Next, open main html page (public/index.html) and include below tag in the head

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

Next, open App.css (src/App.css) and update the CSS to set the margin for button elements.

button {
   margin: 5px;
}

Next, open App component (src/App.js) and update the content with bootstrap button as shown below −

import './App.css'
function App() {
   return (
      <div className="container">
         <button type="button" class="btn btn-primary">Primary</button>
         <button type="button" class="btn btn-secondary">Secondary</button>
         <button type="button" class="btn btn-success">Success</button>
         <button type="button" class="btn btn-danger">Danger</button>
         <button type="button" class="btn btn-warning">Warning</button>
         <button type="button" class="btn btn-info">Info</button>
         <button type="button" class="btn btn-light">Light</button>
         <button type="button" class="btn btn-dark">Dark</button>
         <button type="button" class="btn btn-link">Link</button>
      </div>
   );
}
export default App;

Here,

  • Applied bootstrap CSS class for different type of buttons.

  • Included the App.css style.

Finally, open the application in the browser and check whether the bootstrap classes are properly applied in the button elements as shown below −

Integrating Bootstrap

import feature (CSS only)

Let us see how to integrate the bootstrap CSS using import feature in this section.

First of all, create a new react application and start it using below command.

create-react-app myapp
cd myapp
npm start

Next, install the bootstrap library using below command.

npm install --save bootstrap

Next, open App.css (src/App.css) and update the CSS to set the margin for button elements.

button {
   margin: 5px;
}

Next, open App component (src/App.js), import the bootstrap css and update the content with bootstrap button as shown below −

// Bootstrap CSS
import "bootstrap/dist/css/bootstrap.min.css";
// Bootstrap Bundle JS
import "bootstrap/dist/js/bootstrap.bundle.min";
import './App.css'
function App() {
   return (
      <div className="container">
         <button type="button" class="btn btn-primary">Primary</button>
         <button type="button" class="btn btn-secondary">Secondary</button>
         <button type="button" class="btn btn-success">Success</button>
         <button type="button" class="btn btn-danger">Danger</button>
         <button type="button" class="btn btn-warning">Warning</button>
         <button type="button" class="btn btn-info">Info</button>
         <button type="button" class="btn btn-light">Light</button>
         <button type="button" class="btn btn-dark">Dark</button>
         <button type="button" class="btn btn-link">Link</button>
      </div>
   );
}
export default App;

Here we have −

  • Imported the bootstrap classes using import statement.

  • Applied bootstrap CSS class for different type of buttons.

  • Included the App.css style.

Finally, open the application in the browser and check whether the bootstrap classes are properly applied in the button elements as shown below −

Import Feature

Link tag (Bootstrap + jQuery UI)

React allows the developer to integrate the react component into specific part of the webpage using createRoot method. This feature enables developer to use React and Bootstrap component in a single webpage. Developer can mix both libraries without affecting each other. This is the simple and best option for small webpage. Since it does not need any extra learning, it is easy and safe to implement in a web application.

Wrapper react component

Developer can create a wrapper react component for the necessary bootstrap component and can use it in their application. This method can be used for moderate to complex web application where bootstrap component is not extensively used.

Native react bootstrap component

React community created many component library integrating Bootstrap and React. Some of the popular libraries are as follows −

Let us see how to use React-bootstrap in this chapter by creating a simple React application.

First of all, create a new react application and start it using below command.

create-react-app myapp
cd myapp
npm start

Next, install the bootstrap library using below command,

npm install --save react-bootstrap bootstrap

Next, open App.css (src/App.css) and update the CSS to set the margin for button elements.

button {
   margin: 5px;
}

Next, open App component (src/App.js), import the bootstrap css and update the content with bootstrap button as shown below −

// Bootstrap CSS
import "bootstrap/dist/css/bootstrap.min.css";
// Bootstrap Bundle JS
import "bootstrap/dist/js/bootstrap.bundle.min";
import './App.css'
import { Button } from 'react-bootstrap';
function App() {
   return (
      <div className="container">
         <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>
   );
}
export default App;

Here we have −

  • Imported the bootstrap classes using import statement.

  • Imported the bootstrap button component.

  • Used button component using different variants.

  • Included the App.css style.

Finally, open the application in the browser and check whether the bootstrap classes are properly applied in the button elements as shown below −

Native React Bootstrap

Summary

React has many options to integrates with bootstrap library. React enables the smooth migration of bootstrap component to React bootstrap components in a web application. Rich set of third party bootstrap component enables the developer to provide the great UI/UX experience without moving away from bootstrap library.

Advertisements