React Bootstrap
Getting Started
Run the below code in terminal:
npm install react-bootstrap
Importing Bootstrap Components
At the top of our React Component we should import individual components like: react-bootstrap/Card
rather than the entire library. We do this in our component by placing the below code up top:
import Button from 'react-bootstrap/Button';
Or
import { Card } from “react-bootstrap”;
Using The Bootstrap Component
Now to use our Bootstrap component we can look through the specific doc (card, button, etc) to see the features in the component and what to call it in our code. For example. We use the card component by typing <Card >, this provides a flexible content container with multiple variants and options. Another example: we use the button component by typing <Button>. <Button> will render a HTML <button> element. Here is an example of using <Card>
Some examples that <Card> options include:
<Card.Body>
to pad content inside a<Card>
- Using
<Card.Title>
and<Card.Text>
inside the<Card.Body>
line’s them up nicely <Card.Text>
outputs<p>
tags around the content
Heres what these cards look like in the browser (custom CSS)
Resources