Posted on Feb 19, 2020 • Edited on May 3, 2021

What’s react-bootstrap and How to use it?

Hey, my Name Rajdeep Singh. in the article, we learn react-bootstrap in an easy way.

React-bootstrap is a front-End Stylesheet library. this library builds with two libraries one is react.js and secondly bootstrap.

But when use bootstrap in react.js in this way you use react-bootstrap. why because react-bootstrap provide all bootstrap functionality in our react.js project.

React-bootstrap is bad for us?

My opinion about React-bootstrap is a time saver for developer.but increase HTML, CSS, and increase unuse CSS our small project.

Tip: my tip is very simple to use sass in your React-bootstrap project and optimize your web speed and decrease your file size.

Note: depending on upon your requirements

How to use it?

React-bootstrap easy to use in your project.when build react.js app use of NPM

Create react app npx create-react-app my-app
cd my-app
npm install react-bootstrap bootstrap
import ‘bootstrap/dist/css/bootstrap.min.css’;

After installing react-bootstrap after import CSS on your src/index.js or App.js Component.

How to use in the component file:

import React from "react"; // react bootstrap componentimport Card from 'react-bootstrap/Card' import CardDeck from 'react-bootstrap/CardDeck' import Button from 'react-bootstrap/Button'// import bootstrap css file here import 'bootstrap/dist/css/bootstrap.min.css';// import bootstrap sass file on style.css // https://getbootstrap.com/docs/4.4/getting-started/theming/#sass // @import "../node_modules/bootstrap/scss/bootstrap";import "./styles.css";export default function App() { return ( <CardDeck> <Card className="card"> <Card.Body> <Card.Title>Card title</Card.Title> <Card.Text> This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</Card.Text> </Card.Body> <Card.Footer> <Button> Read me </Button> </Card.Footer> </Card><Card> <Card.Body> <Card.Title>Card title</Card.Title> <Card.Text> This card has supporting text below as a natural lead-in to additional content. </Card.Text> </Card.Body> <Card.Footer> <Button> Read me </Button> </Card.Footer> </Card><Card> <Card.Body> <Card.Title>Card title</Card.Title> <Card.Text> This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action. </Card.Text> </Card.Body> <Card.Footer> <Button> Read me </Button> </Card.Footer> </Card> </CardDeck> ); }