Desmond Nyamador

Using React.js With Bootstrap

Desmond Nyamador

Nov 3, 2020
7 Min read
4,034 Views

Nov 3, 2020
7 Min read
4,034 Views

Web Development

Client-side Frameworks

React

Front End Web Development

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.

11. npx create-react-app <YOUR_APP_NAME>
2
32. cd <YOUR_APP_NAME>
4
53. 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:

Downloading the bootstrap production files

Adding CDN links to your html file.

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.

1npm install react-bootstrap bootstrap
2
3							OR
4
5yarn 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.

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

jsx

Importing Components

Components from React Bootstrap can be imported in two ways.

Importing a specific component

1import Modal from 'react-bootstrap/Modal';

jsx

Importing react-bootstrap and using one component

1import { 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.

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

jsx

Next, add a navigation bar to the app.

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

jsx

Add a jumbotron to the app with some text.

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

jsx

Add the jumbotron and navbar to your app.

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

jsx

Your complete app should look like this.

1import React from "react";
2import 'bootstrap/dist/css/bootstrap.min.css'
3import Navbar from 'react-bootstrap/Navbar';
4import Nav from 'react-bootstrap/Nav';
5import NavDropdown from 'react-bootstrap/NavDropdown';
6import Jumbotron from 'react-bootstrap/Jumbotron';
7import Button from 'react-bootstrap/Button';
8
9function NavBar(){
10  return(
11    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
12  <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
13  <Navbar.Toggle aria-controls="responsive-navbar-nav" />
14  <Navbar.Collapse id="responsive-navbar-nav">
15    <Nav className="mr-auto">
16      <Nav.Link href="#features">Features</Nav.Link>
17      <Nav.Link href="#pricing">Pricing</Nav.Link>
18      <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
19        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
20        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
21        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
22        <NavDropdown.Divider />
23        <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
24      </NavDropdown>
25    </Nav>
26    <Nav>
27      <Nav.Link href="#deets">More deets</Nav.Link>
28      <Nav.Link eventKey={2} href="#memes">
29        Dank memes
30      </Nav.Link>
31    </Nav>
32  </Navbar.Collapse>
33</Navbar>
34  )
35}
36
37function Heading(){
38  return(
39    <Jumbotron>
40  <h1>Hello, world!</h1>
41  <p>
42    This is a simple bootstrap application built following a Pluralsight guide.
43  </p>
44  <p>
45    <Button variant="primary">Learn more</Button>
46  </p>
47</Jumbotron>
48  )
49}
50export default function App() {
51  return (
52    <div className="App">
53      <NavBar/>
54      <Heading/>
55    </div>
56  );
57}

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!

LEARN MORE