DEV Community

loading...
Cover image for React-Bootstrap Integration

React-Bootstrap Integration

bello profile image Bello Updated on ・2 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.

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 
Enter fullscreen mode Exit fullscreen mode
  • 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;
Enter fullscreen mode Exit fullscreen mode

Happy Coding!!!

Buy Me A Coffee

bello image

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.

Discussion (0)

pic
Editor guide