What’s react-bootstrap and How to use it?
Tags: javascript, react, css, sass
Published: 2020-02-19 12:53:09

####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:

```javascript
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>
);
}
```
##Demo:
{% codesandbox m20nw %}

##Reference:
https://getbootstrap.com/docs/4.4/getting-started/introduction/
https://reactjs.org/docs/create-a-new-react-app.html
https://react-bootstrap.github.io/getting-started/introduction/
https://getbootstrap.com/docs/4.4/getting-started/theming/#sass
https://www.w3schools.com/bootstrap4/default.asp
https://www.w3schools.com/REACT/default.asp

##My stuff on medium about Reactjs:
{% medium https://medium.com/@officialrajdeepsingh/basic-infomation-about-sass-scss-9f07752fda1e %}

{% medium https://medium.com/@officialrajdeepsingh/how-to-add-scss-sass-in-react-js-6615b6e77e56 %}

##Conclusion
I hope you understand how to use React-bootstrap. Any query, mistake, and Suggestion plz tell me in the comment box after we update our article.

##Read More
https://www.officialrajdeepsingh.dev/
https://officialrajdeepsingh.medium.com/


##Contact me
https://www.facebook.com/officialrajdeepsingh/
officialrajdeepsingh@gmail.com

Thanks for Reading