So you want to use Bootstrap in your React project!

Bootstrap is a great way to elevate the styling of your projects quickly, and on a vanilla Javascript project, the documentation is extremely helpful and straight forward.

However the transition from vanilla JS to React was not seamless for me when it came time to incorporate the framework. The React Bootstrap documentation here is just not as comprehensive. So I wanted to create a guide for anyone looking to add Bootstrap to their React projects to fill in a few holes.

If you’re just starting to understand React, perhaps it hasn’t all quite sunk in yet, but it’s aaaaallllll about components. So every piece of Bootstrap you’re going to be using will be separate components that you will have to import. And again, the documentation here is, unfortunately, not very clear. While they do explain that you will have to import components, to someone just starting out with React this can be a little confusing. And on top of that, the exact names of the components aren’t always obvious. So you are really going to want to reference that documentation.

Tip: I recommend having both the vanilla Bootstrap docs AND React Bootstrap docs handy. The React docs are missing some of the styling syntax like margins, padding, and color utilities.

Getting Started

First, install Bootstrap into your react app:

npm install react-bootstrap@next bootstrap@5.1.1

Next, you must point to it in your index.js or App.js

import ‘bootstrap/dist/css/bootstrap.min.css’;

If you check now, your React app should have Bootstrap’s basic font and layout styling.

Adding basic Components

To add a basic component, yes, you must import it. Here is a component covering a few examples. Notice Column is abbreviated.

import Row from 'react-bootstrap/Row'
import Container from 'react-bootstrap/Container'
import Col from 'react-bootstrap/Col'
import Button from 'react-bootstrap/Button'
export default function examplesComponent(){
return (
 <Container>
  <Row>
   <Col>
     <p>Welcome to Column 1!</p>
   </Col>
   <Col>
     <p>Welcome to Column 2!</p>
   </Col>
   <Col>
    <p>Welcome to Column 3</p>
   </Col>
  </Row>
  <Button>Click Me!</Button>
 </Container>
 )
}

Note that the capital “B” button here is a bootstrap button, rather than a regular button. Also note that the word “column” is abbreviated!

Note: If you’re using something with a lot of pieces like a “Modal,” “Navbar,” or “Card,” just importing the main component gives you access to the rest of its pieces. For example:

import Modal from 'react-bootstrap/Modal'

gives you access to:

<Modal>
  <Modal.Header>
    <Modal.Title> Gosh, I love modals! </Modal.Title>
   </Modal.Header>
  <Modal.Body>
    <p> How do I love, thee, Modal, let me count the ways </p>
  </Modal.Body>
  <Modal.Footer>
    <Button>Close</Button>
  </Modal.Footer>
</Modal>

Adding basic styling

Now, this might seem obvious to some straight away, but this is nowhere in the React Bootstrap documentation explicitly that I saw, and I wasted a bit of time figuring this out on my own—you add the styling directly to the components via className. And here is where the vanilla documentation comes in handy, because I don’t see the utilities defined anywhere in the React Bootstrap docs, or at least, it’s rather buried. Here is the previous component, with styling and display modifications for mobile added so that the outer columns are hidden when the screen size shrinks to small:

import Row from 'react-bootstrap/Row'
import Container from 'react-bootstrap/Container'
import Col from 'react-bootstrap/Col'
import Button from 'react-bootstrap/Button'
export default function examplesComponent(){
return (
<Container className="bg-dark text-white text-center">
  <Row>
   <Col className="d-none d-sm-block">
     <p>Welcome to Column 1!</p>
   </Col>
   <Col>
     <p>Welcome to Col 2!</p>
   </Col>
   <Col className="d-none d-sm-block">
    <p>Welcome to Col 3</p>
   </Col>
  </Row>
  <Button className="btn btn-success rounded-pill">Click Me!</Button>
 </Container>
 )
}

As you can see above, you can add as many styling components to your className as you want in any order! These will add the Bootstrap utilities to your component, be it margin, spacing, display, etc. Play around! And don’t forget about margins and padding! Change colors with primary, success, info, warning, etc modifications.

And in the component department, have fun with Modals! Carousels! React’s components really shine here—I just LOVE putting components into Modals and will do it every chance I get.

Customizing Bootstrap & a call for help!

Now, the documentation here does tell you how to customize Bootstrap using sass, but every time I’ve gone to do this I’ve spent some significant time in stack overflow trouble shooting version compatibility. I almost always hit this error:

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

Some of the solves here on Stack Over flow have gotten me there and I’ve been able to get my customized projects up and running locally:

Error: 'node-sass' version 5.0.0 is incompatible with ^4.0.0

However, when I go to deploy my projects to Heroku, these workarounds render my applications impossible to deploy, and I know it has to do with sass. It’s a bummer because I love changing the theme colors in bootstrap and it has really made for some incredible looking React projects, and I want the world to see!

If you figure this out, please comment below and let me know how you were able to get your React app to deploy with your App.js or index.js files pointing to sass style sheets!