DEV Community

loading...
Cover image for use bootstrap 5 in react

use bootstrap 5 in react

Tefoh
・3 min read

In following use bootstrap 5 in vue correctly post here we will see how use bootstrap in react application. because bootstrap 5 drop support jQuery we can easily use it without an ui framework like React Bootstrap. first we load bootstrap styles and then we use bootstrap modal to see how bootstrap javascript actually works.

install react with CRA

first we install react application with create react app. to install react app run this command:

npx create-react-app react-bootstrap
Enter fullscreen mode Exit fullscreen mode

then go project directory, install dependencies and run the CRA server.

install bootstrap 5

now the react app installed we should install bootstrap and node-sass for compile scss files. run this commands:

yarn add bootstrap@next node-sass
Enter fullscreen mode Exit fullscreen mode

now we can load bootstrap styles. in index.js file we can easily load bootstrap.scss like this:

import 'bootstrap/scss/bootstrap.scss'
Enter fullscreen mode Exit fullscreen mode

if we use bootstrap classes for e.x. btn classes like <button className="btn btn-primary">test</button> we will see styles applied.

use bootstrap modal

bootstrap besides the styles give us some javascript that make our life easier and modal is one simple example. for this we will use bootstrap docs modal example. you can use this in any component template.

{/* show btn Modal */}
<button type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

{/* Modal */}
<div className="modal fade" id="exampleModal" tabIndex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div className="modal-dialog">
    <div className="modal-content">
      <div className="modal-header">
        <h5 className="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div className="modal-body">
        ...
      </div>
      <div className="modal-footer">
        <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" className="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

there is two parts here one is the button show the modal and second part is the modal. so if we use this nothing works, why? because we just load styles not bootstrap javacript. so we load it too. with import { Modal } from 'bootstrap' we can load only the bootstrap modal javascript part, awesome. but we will get an error that says @popperjs/core package not installed. lets install it with this simple command:

yarn add @popperjs/core
Enter fullscreen mode Exit fullscreen mode

bootstrap need this package for javascript part. now modal should works. nice :) but we havent use react vDOM too make this modal work lets do it with vDOM.

use virtual dom

react and vue use virual dom and because of that we use mostly with state in this frameworks but when we need to use dom elements not state like when want to focus input we should use refs. there is two ways to use bootstrap javascript one using data-bs, two use javascript. with second way we can use refs to make modal works. bootstrap docs says we can use it like this:

var myModal = new Modal(document.getElementById('exampleModal'), options)
Enter fullscreen mode Exit fullscreen mode

Modal is the one we imported earlier. we can replace document.getElementById('exampleModal') with our ref and we will name our ref exampleModal. we will need a state for modal to show and hide the modal. and for that we will use react hooks:

const [modal, setModal] = useState(null)
const exampleModal = useRef()

useEffect(() => {
  setModal(
    new Modal(exampleModal.current)
  )
}, [])
Enter fullscreen mode Exit fullscreen mode

with modal.show() we can show modal and for hide just use hide method and the button for show modal will be like this:

<button type="button" onClick={() => modal.show()} className="btn btn-primary">
  Launch demo modal
</button>
Enter fullscreen mode Exit fullscreen mode

and now we use vDOM to use bootstrap modal. good job :)) the hole simple component will be like this:

import { Modal } from 'bootstrap'
import { useState, useEffect, useRef } from 'react'

function App() {
  const [modal, setModal] = useState(null)
  const exampleModal = useRef()

  useEffect(() => {
    setModal(
      new Modal(exampleModal.current)
    )
  }, [])

  return (
    <>
      {/* show btn Modal */}
      <button type="button" onClick={() => modal.show()} className="btn btn-primary">
        Launch demo modal
      </button>

      {/* Modal */}
      <div className="modal fade" ref={exampleModal} tabIndex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title" id="exampleModalLabel">Modal title</h5>
              <button type="button" className="btn-close" onClick={() => modal.hide()} aria-label="Close"></button>
            </div>
            <div className="modal-body">
              ...
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-secondary" onClick={() => modal.hide()}>Close</button>
              <button type="button" className="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Summary

we created a react application and installed bootstrap. then we used bootstrap modal with data-bs and easy way but after that used react vDOM and correct way. i hope this short post helped, i covered this topics in my course and shared my little Knowledge about this topic.

Discussion (7)

Collapse
rahxuls profile image
Rahul

Yayayaya. Bootstrap would be pretty amazing and easy to design😀.
I need to try one. Amazing post.

Collapse
tefoh profile image
Tefoh Author

tnx sir :) yea now jquery gone its dream come true

Collapse
rahxuls profile image
Rahul

Haha.

Collapse
liwaltgames profile image
Liwalt Games

node-sass is deprecated, use npm --save sass

Collapse
henrychea profile image
Henry Chea

Awesome article 👍

Collapse
nimajnebp profile image
benjamin papp • Edited

react-bootstrap does not support bootstrap5, for instance u cannot initiate the xxl breakpoint on a "Col" component.

Some comments have been hidden by the post's author - find out more