Getting started with React Bootstrap - Posts

Bootstrap is a popular front-end CSS Framework. It has a lot of components built into it. In this post, we will see how to use Bootstrap in our React Project.

Installation

Run the below command to install React-bootstrap

yarn add react-bootstrap

Now, go to index.js and import the stylesheet

import 'bootstrap/dist/css/bootstrap.min.css'

To import a component, you can do like below

import { Button } from 'react-bootstrap'

Using components

Let us build a Card component from the Bootstrap library

First, import the card component

import { Card } from 'react-bootstrap'

Then to use it, use the code below

<Card style={{ width: '20rem' }}>
  <Card.Img variant="top" src="https://reactjs.org/logo-og.png" />
  <Card.Body>
    <Card.Title>This is card title</Card.Title>
    <Card.Text>
      This is card description
    </Card.Text>
  </Card.Body>
</Card>

It will display a card like