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
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
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
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
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";
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";
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;
Doing this will give us this:
Notice the way we imported our components before using them.
Sponsored:
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";
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>
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";
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>
Importing Bootstrap Cards to Reactjs
Import it into you template like this:
import Card from "react-bootstrap/Card";
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>
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;
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.
Top comments (4)
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.
Thank you, yes it is not that hard at all :)
Very detailed tutorial. Thank you!
You're most welcome.