React Bootstrap

Photo by Joshua Reddekopp on Unsplash

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

• react bootstrap