Reactjs + bootstrap
What’s react-bootstrap, and How do you use it?
Installing React-bootstrap in reactjs
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.
Is React-bootstrap bad for us?
My opinion about React-bootstrap is a time saver for developers. But increase HTML CSS and unused CSS in our small project.
Tip
My tip is straightforward: use sass in your React-bootstrap project, 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 the 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, 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>
);
}
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
Conclusion
I hope you understand how to use React-bootstrap. Any queries, mistakes, and Suggestions. Please, tell me in the comment box after we update our article.