Using React.js With Bootstrap
Learn 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.
Nov 3, 2020 • 7 Minute Read
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. npx create-react-app <YOUR_APP_NAME>
2. cd <YOUR_APP_NAME>
3. yarn start or npm start
<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.
npm install react-bootstrap bootstrap
OR
yarn add react-bootstrap bootstrap
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.
import 'bootstrap/dist/css/bootstrap.min.css'
Importing Components
Components from React Bootstrap can be imported in two ways.
- Importing a specific component
import Modal from 'react-bootstrap/Modal';
- Importing react-bootstrap and using one component
import { Modal } from 'react-bootstrap/Modal';
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.
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';
Next, add a navigation bar to the app.
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>
)
}
Add a jumbotron to the app with some text.
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>
)
}
Add the jumbotron and navbar to your app.
export default function App() {
return (
<div className="App">
<NavBar/>
<Heading/>
</div>
);
}
Your complete app should look like this.
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>
);
}
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!
