React-Bootstrap Integration

This article is sponsored by Fiverr - 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.

Note: 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.

npm install @babel/runtime bootstrap jquery popper.js reactstrap 

• Import Bootstrap CSS into your JavaScript file, App.js.

App.js

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 Osagie, 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;

Happy Coding!!!

Bello OsagieFollow

Hi, I am Bello Osagie, a tech blogger, writer, and web developer. I teach web development for free… Join me to learn, discover, and have fun coding together!

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 to find the perfect freelance services for your business or become a freelancer.

Support what I do and push me to keep making free content.