DEV Community

Cover image for React Bootstrap Tutorial | How to add Bootstrap to React
Sunil Joshi
Sunil Joshi

Posted on • Updated on • Originally published at wrappixel.com

React Bootstrap Tutorial | How to add Bootstrap to React

In this article we will see some best practices for React Bootstrap. Integrating native bootstrap in React is not as easy as it seems, as you will need to find a way to remove the jQuery dependency of Bootstrap before integrating it in your React Project. So lets start with our Reactjs bootstrap tutorial.

Prerequisites

  • Familiarity with HTML, CSS, and JavaScript.
  • Vs code or any code editor installed on your development machine.
  • Basic knowledge of React

How to use Bootstrap with React

We will start by setting up a new React application. We will be using Create React App to setup our application. If you don’t have this installed on your local machine, open up your terminal a type this:

npm install -g create-react-app
Enter fullscreen mode Exit fullscreen mode

The -g flag will install it globally in your local machine.

After installing create react app, we can now scaffold a new React project by create-react-app follower by the name of the application:

mkdir reactbootstrap && cd reactbootstrap
create-react-app bootstrap4
Enter fullscreen mode Exit fullscreen mode

After the installation is completed, we will have to move into our projects working directory and then run npm start. This command will run our application on port 3000.

cd bootstrap4
npm start
Enter fullscreen mode Exit fullscreen mode

Now that we have bootstrap up and running, We can now setup bootstrap into our application.

Installing React Bootstrap

We will need to install react bootstrap into our application. This package gives us access to all the native bootstrap components. To install it open up your terminal and run this command(Ensure that your terminal is opened on the projects working directory):

npm install react-bootstrap bootstrap --save
Enter fullscreen mode Exit fullscreen mode

We still install the native Bootstrap in order for our application to run smoothly. After installation, we will need to import Bootstrap CSS file into our root Js file. To do this add this in the src/index.js file:

import "bootstrap/dist/css/bootstrap.css";
Enter fullscreen mode Exit fullscreen mode

To speed up your application, React lets you import only components that you want to use in your application instead of importing the entire Bootstrap package.

If you prefer sass you can import this in your index.js file:

@import "~bootstrap/scss/bootstrap";
Enter fullscreen mode Exit fullscreen mode

To use any of the Bootstrap component we will need to import it in our App.js file

Before we import our components, remove all the codes in App.css file to avoid any form of conflict.

Lets see how we can use some of our Bootstrap components.

Add Bootstrap to React

To use navbar component, we need to import it first and then use it our application. Modify your App.js file to this:

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import Container from "react-bootstrap/Container";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
function App() {
  return (<div className="App">
    <Navbar expand="lg" variant="light" bg="info">
      <Container>
        <Navbar.Brand href="#">Navbar</Navbar.Brand>
        <Nav className="mr-auto">
          <Nav.Link href="#home">Home</Nav.Link>
          <Nav.Link href="#features">Features</Nav.Link>
          <Nav.Link href="#pricing">Pricing</Nav.Link>
        </Nav>;
      </Container>
    </Navbar>;
  </div>);
}
export default App;
Enter fullscreen mode Exit fullscreen mode

Doing this will give us this:

Bootstrap with React

Notice the way we imported our components before using them.


Sponsored:

Bootstrap


Import Bootstrap React

We will import the Bootstrap Jumbotron component and then use it in our component. On the Jumbotron we will add a button on top of it. To do this we will need to also import the Buttons component too

//Jumbotron
import Jumbotron from "react-bootstrap/Jumbotron";
import Button from "react-bootstrap/Button";
Enter fullscreen mode Exit fullscreen mode

And then add the component in the template like this:

 <Jumbotron>
      <h1>Hello, I'm Sunil!</h1>
      <p>
        This is a simple hero unit, a simple jumbotron-style component for
        calling extra attention to featured content or information.
      </p>
      <p>
        <Button variant="info">Learn more</Button>
      </p>
    </Jumbotron>
Enter fullscreen mode Exit fullscreen mode

Reactjs Bootstrap

Import Rows And Columns to React

This is are one of the most important features in bootstrap. In comes in handy when you want to start working with layouts in your application. To use it we will have to import it and then use it in our application:

// rows and columns
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";
Enter fullscreen mode Exit fullscreen mode

And then you in our template:

<Container>
      <Row>
        <Col>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque
            saepe sint voluptatum?
          </p>
        </Col>
        <Col>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Voluptates, voluptas. Enim, fuga!
          </p>
        </Col>
        <Col>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto
            atque hic corrupti.
          </p>
        </Col>
      </Row>
    </Container>
Enter fullscreen mode Exit fullscreen mode

Add Bootstrap to React

Importing Bootstrap Cards to Reactjs

Import it into you template like this:

import Card from "react-bootstrap/Card";
Enter fullscreen mode Exit fullscreen mode

And then use it in the component:

     <Container>
          <Row>
            <Col>
              <Card style={{ width: "18rem" }}>
                <Card.Body>
                  <Card.Title>Card Title</Card.Title>
                  <Card.Subtitle className="mb-2 text-muted">
                    Card Subtitle
                  </Card.Subtitle>
                  <Card.Text>
                    Some quick example text to build on the card title and make up
                    the bulk of the card's content.
                  </Card.Text>
                  <Card.Link href="#">Card Link</Card.Link>
                  <Card.Link href="#">Another Link</Card.Link>
                </Card.Body>
              </Card>;
            </Col>
          </Row>
        </Container>
Enter fullscreen mode Exit fullscreen mode

Import Bootstrap React

We could put all this components together in our application to build a simple web interface:

    import React from "react";
    import logo from "./logo.svg";
    import "./App.css";
    import Container from "react-bootstrap/Container";
    import Navbar from "react-bootstrap/Navbar";
    import Nav from "react-bootstrap/Nav";
    //Jumbotron
    import Jumbotron from "react-bootstrap/Jumbotron";
    import Button from "react-bootstrap/Button";
    // rows and columns
    import Col from "react-bootstrap/Col";
    import Row from "react-bootstrap/Row";
    //cards
    import Card from "react-bootstrap/Card";
    function App() {
      return (<div className="App">
        <Navbar expand="lg" variant="light" bg="info">
          <Container>
            <Navbar.Brand href="#">Navbar</Navbar.Brand>
            <Nav className="mr-auto">
              <Nav.Link href="#home">Home</Nav.Link>
              <Nav.Link href="#features">Features</Nav.Link>
              <Nav.Link href="#pricing">Pricing</Nav.Link>
            </Nav>
          </Container>
        </Navbar>
        <Jumbotron>
          <h1>Hello, I'm Sunil!</h1>
          <p>
            This is a simple hero unit, a simple jumbotron-style component for
            calling extra attention to featured content or information.
          </p>
          <p>
            <Button variant="info">Learn more</Button>
          </p>
        </Jumbotron>
        <Container>
          <Row>
            <Col>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque
                saepe sint voluptatum?
              </p>
            </Col>
            <Col>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Voluptates, voluptas. Enim, fuga!
              </p>
            </Col>
            <Col>
              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto
                atque hic corrupti.
              </p>
            </Col>
          </Row>
        </Container>
        <Container>
          <Row>
            <Col>
              <Card style={{ width: "18rem" }}>
                <Card.Body>
                  <Card.Title>Card Title</Card.Title>
                  <Card.Subtitle className="mb-2 text-muted">
                    Card Subtitle
                  </Card.Subtitle>
                  <Card.Text>
                    Some quick example text to build on the card title and make up
                    the bulk of the card's content.
                  </Card.Text>
                  <Card.Link href="#">Card Link</Card.Link>
                  <Card.Link href="#">Another Link</Card.Link>
                </Card.Body>
              </Card>;
            </Col>
          </Row>
        </Container>
      </div>);
    }
    export default App;
Enter fullscreen mode Exit fullscreen mode

React Bootstrap

You can go on and explore all your Bootstrap 4 components in your application after setting this up.

React Bootstrap Templates

Building everything from scratch is time consuming task. If you are looking for a solution, which can help you to save tons of time and also help you to impress your boss or your users with stunning interfaces, you find some ready to use react bootstrap templates from WrapPixel and AdminMart. They also have amazing react dashboard and website templates, which can help you to build admin panel of your react project and in website development project with ease.

Oldest comments (5)

Collapse
 
huericnan profile image
Eric Hu

Very detailed tutorial. Thank you!

Collapse
 
suniljoshi19 profile image
Sunil Joshi

You're most welcome.

Collapse
 
javaarchive profile image
Raymond

This is cool! This might fix the issue of bootstrap websites loading slowly because the entire framework needs to be loaded. I haven't seen react and bootstrap before but turns out it's not hard to put them together.

Collapse
 
suniljoshi19 profile image
Sunil Joshi

Thank you, yes it is not that hard at all :)