Author avatar

Desmond Nyamador

Using React.js With Bootstrap

Desmond Nyamador

  • Nov 3, 2020
  • 7 Min read
  • 105 Views
  • Nov 3, 2020
  • 7 Min read
  • 105 Views
Web Development
Front End Web Development
Client-side Frameworks
React

Introduction

Bootstrap is the most popular frontend component library. It comes packed with lots of components out of the box with little to no customization necessary, depending on your use case or requirements. In this guide, you'll learn how to use React (the world's most popular frontend library) with Bootstrap (the world's most popular component library).

Setting Up the App

To get started, run the following command in your terminal to set up your React project.

1
2
3
4
5
1. npx create-react-app <YOUR_APP_NAME>

2. cd <YOUR_APP_NAME>

3. yarn start or npm start
bash

<YOUR_APP_NAME> refers the name you'd like to give to your React project.

If you really want to get started quickly without the pain of setting up a create-react-app project, open up your browser and visit https://react.new to get a fully configured React development environment via https://codesandbox.io .

Using Bootstrap

Bootstrap can be used in different ways, including:

  1. Downloading the bootstrap production files
  2. Adding CDN links to your html file.
  3. Downloading via a package manager such as npm or yarn.

In this guide you'll install Bootstrap with a package manager and install the React Bootstrap library, which comes with React components you can use easily.

Run the following command to install react-bootstrap.

1
2
3
4
5
npm install react-bootstrap bootstrap

							OR

yarn add react-bootstrap bootstrap
bash

React Bootstrap doesn't use a precise version of Bootstrap, but you'll need to add some default styling to use the components. Add the following line of code to your src/index.js or src/App.js file.

1
import 'bootstrap/dist/css/bootstrap.min.css'
jsx

Importing Components

Components from React Bootstrap can be imported in two ways.

  1. Importing a specific component
1
import Modal from 'react-bootstrap/Modal';
jsx
  1. Importing react-bootstrap and using one component
1
import { Modal } from 'react-bootstrap/Modal';
jsx

Note: The React Bootstrap documentation recommends that you use the first method, as it reduces the amount of code you send to the client. The second method sends the complete library to the client, adding unnecessary bytes and degrading the performance of your app.

Creating a Page

First, import all the components needed. As mentioned in the "Importing components" section, all components will be imported individually.

1
2
3
4
5
6
7
import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css'
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import NavDropdown from 'react-bootstrap/NavDropdown';
import Jumbotron from 'react-bootstrap/Jumbotron';
import Button from 'react-bootstrap/Button';
jsx

Next, add a navigation bar to the app.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function NavBar(){
  return(
    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
  <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
  <Navbar.Toggle aria-controls="responsive-navbar-nav" />
  <Navbar.Collapse id="responsive-navbar-nav">
    <Nav className="mr-auto">
      <Nav.Link href="#features">Features</Nav.Link>
      <Nav.Link href="#pricing">Pricing</Nav.Link>
      <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
        <NavDropdown.Divider />
        <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
      </NavDropdown>
    </Nav>
    <Nav>
      <Nav.Link href="#deets">More deets</Nav.Link>
      <Nav.Link eventKey={2} href="#memes">
        Dank memes
      </Nav.Link>
    </Nav>
  </Navbar.Collapse>
</Navbar>
  )
}
jsx

Add a jumbotron to the app with some text.

1
2
3
4
5
6
7
8
9
10
11
12
13
function Heading(){
  return(
    <Jumbotron>
  <h1>Hello, world!</h1>
  <p>
    This is a simple bootstrap application built following a Pluralsight guide.
  </p>
  <p>
    <Button variant="primary">Learn more</Button>
  </p>
</Jumbotron>
  )
}
jsx

Add the jumbotron and navbar to your app.

1
2
3
4
5
6
7
8
export default function App() {
  return (
    <div className="App">
      <NavBar/>
      <Heading/>
    </div>
  );
}
jsx

Your complete app should look like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css'
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import NavDropdown from 'react-bootstrap/NavDropdown';
import Jumbotron from 'react-bootstrap/Jumbotron';
import Button from 'react-bootstrap/Button';

function NavBar(){
  return(
    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
  <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
  <Navbar.Toggle aria-controls="responsive-navbar-nav" />
  <Navbar.Collapse id="responsive-navbar-nav">
    <Nav className="mr-auto">
      <Nav.Link href="#features">Features</Nav.Link>
      <Nav.Link href="#pricing">Pricing</Nav.Link>
      <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
        <NavDropdown.Divider />
        <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
      </NavDropdown>
    </Nav>
    <Nav>
      <Nav.Link href="#deets">More deets</Nav.Link>
      <Nav.Link eventKey={2} href="#memes">
        Dank memes
      </Nav.Link>
    </Nav>
  </Navbar.Collapse>
</Navbar>
  )
}

function Heading(){
  return(
    <Jumbotron>
  <h1>Hello, world!</h1>
  <p>
    This is a simple bootstrap application built following a Pluralsight guide.
  </p>
  <p>
    <Button variant="primary">Learn more</Button>
  </p>
</Jumbotron>
  )
}
export default function App() {
  return (
    <div className="App">
      <NavBar/>
      <Heading/>
    </div>
  );
}
jsx

Conclusion

And that's it! In this guide, you learned about Bootstrap and how to integrate it into your React projects so you don't have to reinvent the wheel every time you're creating an app. You can follow the official documentation of React Bootstrap and also the official Bootstrap documentation.

Feel free to ping me on Twitter, as always, @DesmondNyamador if you'd like to talk more about this or any other questions you may have. Stay safe!

1