How to use bootstrap with react: The detailed guide for developers

React’s support for a plethora of frameworks and libraries has allowed developers to build intriguing UI with minimal code and integrate external APIs for intricate functionalities. Bootstrap is the most popular CSS framework, used by a multitude of enterprises for single-page apps. But can you use bootstrap with React? The answer for this question is in the this blog. So let’s follow this blog carefully. Because in this article, this guide explores how to use Bootstrap with React for developers.

Bootstrap Components

How to use bootstrap with react

Bootstrap offers a variety of components that can be used in your markup templates to offer a seamless user experience throughout your app. Some of these include:

  • Alerts and toasts for an event’s feedback
  • Modals, tooltips, collapsible, and popovers for displaying additional information
  • Forms, dropdowns, input groups, and select to handle user forms
  • Buttons, progress, and spinners to enhance the visual effects of the app
  • Lists, pagination, and breadcrumbs for displaying large amounts of content in a presentable format
  • Badges, cards, carousel, and jumbotrons for an attractive UI

So let’s go to the next part to answer the question” Can you use bootstrap with React?”

Can you use bootstrap with React?

Using Native Bootstrap with React

Start by creating an empty project.

Make sure you have Nodejs and npm installed in your machine (at least version 8 or higher) along with a code editor and a web browser (preferably Chrome or Firefox).

Create a new project using create-react-app:

npx create-react-app bootstrap-react

shell

Cleaning up the Template

Remove the logo, App.css, and all their imports from App.js. Clean out the starter template inside the App component. Your App.js should look like this:


import React from 'react';

function App() {
  return (
    <div className="App">
      <h2>Hello</h2>
    </div>
  );
}

export default App;

jsx

Setting up

First you need to get the Bootstrap styles. Head over to hte index.html file inside the public folder and add the following CDN inside the :

... <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> ...

Now all the Bootstrap style classes are ready to be used with JSX elements. Add the following script tags to enable JavaScript of the components.

...
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
...

To make sure the HTML body loads before loading these scripts, put them right above the closing of your index.html.

Using Alerts, Buttons and Form Components

To create a simple form using Bootstrap’s form component, add the following code inside App.js .

import React from 'react';
function App() {  
  return (
    <div className="App">
      <div className="container">
        <form >
            <label>Name: </label> 
            <input type = "text" className="form-control"/> 
            <input type = "submit"
            value = "Submit" className="btn btn-primary"/>
        </form> 
      </div>
    </div>
  );
}

export default App;

This will render the form on the page with an input field and a button. These components can be used by simply putting down their markup in your JSX template. However, to get these components in an event-driven format, your parent component should interact with them through the state.

Import the useState hook and create a state variable to keep track of an alert that will trigger when this form gets submitted. Set it initially false.

import React,{useState} from 'react';

function App() {
  let [alert,setAlert]=useState(false);
  ...
 }

Add a submit event that fires up when the form submits to set the alert’s value to true.


import React,{useState} from 'react';

function App() {
  let [alert,setAlert]=useState(false);

  const handleSubmit=(e)=>{
    e.preventDefault();
    setAlert(true);
  }
  
  return (
    <div className="App">
      <div className="container">
        <form onSubmit = {handleSubmit} >
        ...
   )
 }

Last, conditionally output a Bootstrap alert component as a JSX element.

...
    {alert && <div class="alert alert-success alert-dismissible fade show" role="alert">
              <strong>Congrats!</strong> Your details have been submitted successfully
              <button type="button" class="close" data-dismiss="alert" aria-label="Close" 
              onClick={()=>{setAlert(false)}}>
                <span aria-hidden="true">&times;</span>
              </button>
          </div>
     }
 ...

Note that you need to set the value of the alert back to false after it is dismissed so the state variables stay inline with the alert event. The inline function on the closing button does this job.

Testing

Inside the root directory, run the following.

npm start

This will spin up a local development server (usually on port 3000) and you can see your form along with a button on the page. Click the submit button and an alert with a success message appears on the page. You can close the alert and fire it again through the submit button.

Using React Bootstrap

A solution to the above-mentioned problems is using React Bootstrap, a component-based library where everything is essentially a React component that can be rendered as a child component inside the component outputting it.

Setup

You can create a fresh CRA project by following the earlier steps up until the ‘Setting up Bootstrap’ section, or you can clean out the earlier template by undoing everything back to the ‘Setting up Bootstrap’ section. Your clean and empty App.js is good to go.

Installing React Bootstrap

Inside the root directory, run the following command to install the React Bootstrap library .


npm install react-bootstrap bootstrap

This will install both Bootstrap and React Bootstrap inside the project.

Using the Dropdown Component

For regular Bootstrap styles to work correctly, import the Bootstrap styles on top. You need to do this every time you use a React Bootstrap component.


import 'bootstrap/dist/css/bootstrap.min.css';

The above is equivalent to adding Bootstrap CDN in your index.html file. Now import the DropdownButton and Dropdown from react-bootstrap. This step is common regardless of the component you’re using, but make sure you’re importing the right and only required components.

import DropdownButton from 'react-bootstrap/DropdownButton';
import Dropdown from 'react-bootstrap/Dropdown'

Render them on the DOM inside App.js .

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import DropdownButton from 'react-bootstrap/DropdownButton';        
import Dropdown from 'react-bootstrap/Dropdown'

function App() { 
  return (
    <div className="App container">
      <DropdownButton
      alignRight
      title="Dropdown right"
      id="dropdown-menu-align-right"
      >
              <Dropdown.Item eventKey="option-1">option-1</Dropdown.Item>
              <Dropdown.Item eventKey="option-2">option-2</Dropdown.Item>
              <Dropdown.Item eventKey="option-3">option 3</Dropdown.Item>
              <Dropdown.Divider />
              <Dropdown.Item eventKey="some link">some link</Dropdown.Item>
      </DropdownButton>
    </div>
  );
}

export default App;

You can see your Dropdown Component rendered with a list of items. Let’s look at another example .

Using the Popover Components

Inside a clean and empty App.js, after importing Bootstrap styles, import PopoverOverlayTrigger, and Button from react-bootstrap .

To create a popover inside the popover component, render the Popover.Title component to indicate the title of the popover and Popover.Content component to indicate its content. Store this popover in a constant variable and output it inside the JSX template.


...
 const popover = (
    <Popover id="popover-basic">
      <Popover.Title as="h3">Popover title</Popover.Title>
      <Popover.Content>
        Popover content <strong>some strong content</strong> Normal content again
      </Popover.Content>
    </Popover>
  );
...

Output the popover inside an overlay and use the trigger prop to set the type of event the overlay listens for. The placement prop defines the position of your popover.

....
     return (
    <div className="App">
    <OverlayTrigger trigger="click" placement="right" overlay={popover}>
      <Button variant="success">Click to trigger popover</Button>
    </OverlayTrigger>
    </div>
  );
....

Finally, your App.js should look like this :


import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css'
import Popover from 'react-bootstrap/Popover';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Button from 'react-bootstrap/Button';

function App() {
  const popover = (
    <Popover id="popover-basic">
      <Popover.Title as="h3">Popover title</Popover.Title>
      <Popover.Content>
        Popover content <strong>some strong content</strong> Normal content again
      </Popover.Content>
    </Popover>
  );

  return (
    <div className="App">
    <OverlayTrigger trigger="click" placement="right" overlay={popover}>
      <Button variant="success">Click to trigger popover</Button>
    </OverlayTrigger>
    </div>
  );
}

export default App;

Now you can see the popover button and the popover itself when you click on the button.

In case you get any depreciated warnings or errors, you can use the exact version of react-bootstrap that is used in this guide by updating your package.json file and running the command npm i .

....
"bootstrap": "^4.4.1",
"react-bootstrap": "^1.0.1",
....

To Sum Up

Finally, this article have already answer your question “Can you use bootstrap with React ?” Both How to use bootstrap with react methods discussed in this guide let you use bootstrap components in your React project. They allow you to develop your app faster without compromising the UI/UX. Choose the first one for smaller applications, as the fewer dependencies your project has, the smoother it runs. For large applications, using React Bootstrap is an ideal choice.

More importantly, don’t forget that ArrowHiTech will stay here to support you in your business. Don’t hesitate. Let’s us know all your difficulties via CONTACT FORM.

Tags

Share