# React-Bootstrap Integration

###### *This article is sponsored by [Fiverr](http://www.fiverr.com/s2/fa85266916) - Freelance to get extra income or become a full-time freelancer.*

---
It is possible to integrate React with other libraries or frameworks. For example, the integration of React with Bootstrap.

> None of the setups below will be used in future articles. 

---
### Boostrap
> Bootstrap is a front-end framework for building fast, responsive, mobile-first sites with ease.

Bootstrap can be installed into React by using any package manager of your choice like `npm`, `yarn`, etc.

- Install Babel modular runtime helpers, `@babel/runtime` with a couple of other dependencies. 

```bash
npm install @babel/runtime bootstrap jquery popper.js reactstrap 
``` 
- Import Bootstrap **CSS** into your JavaScript file, *App.js*.

**App.js**
```jsx
import React from "react";
import { Card, Button, CardTitle, CardText, Row, Col } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

const Bio = () => {
  return (
    <Row>
      <Col sm="6" className="mx-auto w-75 mt-5">
        <Card body>
          <CardTitle tag="h5">Bello</CardTitle>
          <CardText>
            Hi, I am Bello Noah, a web developer and freelancer. I teach web
            development for free. So join me and have fun coding together!!!
          </CardText>
          <Button color="primary">Follow</Button>
        </Card>
      </Col>
    </Row>
  );
};

export default Bio;
```

%[https://react-bootstrap-integration.glitch.me]

**Happy Coding!!!**

---
[![Buy me a Coffee](https://res.cloudinary.com/bizstak/image/upload/v1610317510/ko-fi-trans_fr3su4.png)](https://www.buymeacoffee.com/bellotech)

---
#### Techstack | Fiverr
Techstack article, sponsored by Fiverr.
- Connect to freelancers with proven business experience.
- Get matched with the perfect talent by a customer service manager.
- Freelance to get extra income or become a full-time freelancer.

[Sign up](http://www.fiverr.com/s2/fa85266916) to find the perfect freelance services for your business or become a freelancer.

%[https://youtu.be/EkPDLVqKkLc]

[Support](https://dashboard.flutterwave.com/donate/3lo9klliqwbu) what I do and push me to keep making free content.