Rajdeep Singh
Published in

Rajdeep Singh

What’s react-bootstrap, and How do you use it?

Hey, my Name is Rajdeep Singh. in the article, we easily learn react-bootstrap.

React Bootstrap

React-bootstrap is a front-End Stylesheet library. This library builds with two libraries one is react.js, and the second is bootstrap.

But when you use bootstrap in react.js in this way, you use react-bootstrap. Why because react-bootstrap provides all bootstrap functionality in our react.js project.

React-bootstrap is bad for us?

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

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

Note: depending upon your requirements

How to use it?

React-bootstrap is easy to use in your project. when building react.js app, use 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 component
import 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>
);
}

Reference:

Conclusion

I hope you understand how to use React-bootstrap. Any queries, mistakes, and Suggestions. Plz, tell me in the comment box after we update our article.

--

--

--

Computer Science & Biology & Bioinformatic

Recommended from Medium

Simple CSS Animations

Easiest User Validation on authentication with indicative on ReactJS

Whats is a Binary Tree

A deeper look into React fundamentals

Running a sample Fullstack Springboot React application on Kubernetes.

28.05. Morning limit delete test — 3

Learn some unique React.js Fundamental concepts

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep singh

Rajdeep singh

JavaScript || Reactjs || Nextjs || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || Writer || https://officialrajdeepsingh.dev/

More from Medium

React JS and Next JS are popular JavaScript tools among front-end developers.

Understanding Asynchronous Redux Actions with Redux Thunk

The React Project

An investigative guide to React JS[DOM, Virtual DOM and JSX] Part-V