React-Bootstrap Integration

React-Bootstrap Integration

·

3 min read

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.

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

Happy Coding!!!


Buy me a Coffee


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.