React-Bootstrap Integration

React-Bootstrap Integration

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article
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.

 
Share this

Impressum

TechStack Media was launched in the year 2020 to make the learning of web technologies easier and more fun.

My name is Bello Osagie, I am the founder of TechStack, and my focus is to give in-depth, senior-level knowledge of the course through a step-by-step approach. You will learn HTML, CSS, JavaScript etc.

You can find my posts on Dev.to, Medium, Hashnode, Hackernoon, and Blogspot

The approach is to first start with the basics, then advance to more topics. Lots of practical examples are added to make learning more easier. TechStack Media also includes videos apart from content writing to make sure you understand all the concepts in a particular topic or course. Contents are frequently updated, so you do not miss out on the latest technology.

If you need a contact me on any of my social media or email:

For exclusive web technology tutorials, join my patron page.

Proudly part of