Using Bootstrap 5 with React
Tags: react, bootstrap, frontend, javascript
Published: 2020-12-30 16:41:00

---
title: Using Bootstrap 5 with React
published: true
description: How to Bootstrap in React without jquery or react-bootstrap
tags: react, bootstrap, frontend, javascript
cover_image: https://imgur.com/mZzG0vn.png
---

How to use the new Bootstrap 5 with React
==

Bootstrap and React have both been around for a while now, but now that the **Bootstrap 5** beta is out, there's finally something to cheer about! 🙌

Now that Bootstrap 5 no longer requires jQuery, using it in your React app is much easier and without conflicts! 😲 Now that Bootstrap 5 components are written as vanilla JS plugins, you get improved alignment with React's best patterns & practices.

This also means it's possible to use Bootstrap 5 components without the need for a 3rd party library like react-bootstrap or reactstrap.

---

First up, add Bootstrap to your React app's `package.json`:

`npm install bootstrap --save`

Once Bootstrap is included, you'll be able to `import` components the way you do with any JS module. For example, let's import Bootstrap's Toast component...

`import { Toast} from bootstrap`

And then use it with React's `useEffect` and `useState` hooks...

```
function ToastDemo() {
    var [toast, setToast] = useState(false);
    const toastRef = useRef();

    useEffect(() => {
        var myToast = toastRef.current
        var bsToast = bootstrap.Toast.getInstance(myToast)
        
        if (!bsToast) {
            // initialize Toast
            bsToast = new Toast(myToast, {autohide: false})
            // hide after init
            bsToast.hide()
            setToast(false)
        }
        else{
            // toggle
            toast ? bsToast.show() : bsToast.hide()

        }
    })

    return (
    <div className="py-2">
        <button className="btn btn-success" onClick={() => setToast(toast => !toast)}>
            Toast {toast?'hide':'show'}
        </button>
        <div className="toast" role="alert" ref={toastRef}>
            <div className="toast-header">
                <strong className="me-auto">Bootstrap 5</strong>
                <small>4 mins ago</small>
                <button type="button" className="btn-close" onClick={() => setToast(false)} aria-label="Close"></button>
            </div>
            <div className="toast-body">
              Hello, world! This is a toast message.
            </div>
        </div>
    </div>
    )
}
```

***Or***, (if that wasn't easy enough) use the new namespaced `data-bs-` attributes directly in your markup. For example, let's use the Bootstrap 5 Collapse component...

```
function CollapseDemo() {
  return (
    <div className="py-2">
        <button className="btn btn-primary" data-bs-target="#collapseTarget" data-bs-toggle="collapse">
            Toggle collapse
        </button>
        <div className="collapse" id="collapseTarget">
            This is the toggle-able content!
        </div>
    </div>
  )
}
```

---

Now you can easily use any of the [Bootstrap 5 Components](https://getbootstrap.com/docs/5.0/getting-started/introduction/) in your React project. Check out [these Bootstrap 5 React examples](https://www.codeply.com/p/IdzoX6osI2) that use the Bootstrap 5 Toast, Alert, Collapse, Modal, Tooltip and Popover. Also be sure to take a look at all the [new updates in Bootstrap 5](https://dev.to/codeply/what-s-new-in-bootstrap-5-2bb7).

What do you think? Do you plan on bringing Bootstrap 5 into your next React project, or do you prefer a different React friendly design system?