Awais Abbas

Posted on Oct 17, 2020 • Updated on Dec 1, 2020

Starting with react-bootstrap

#bootstrap #reactbootstrap #react #components

Hi folks! This is a simple guide for the ones facing trouble setting up react-bootstrap. I will walk you through the basic steps one-by-one with some examples. So, stick together and lets rock-n-roll :)

Creating a React Project

Installing react-app

"create-react-app" is an npm package that sets up the react project for you. Open the terminal and type:

npm install -g create-react-app yarn add create-react-app (If you use Yarn)

Tip : To check if "package is already installed on system", type:
npm list -g "package-name"

Lets create the project with "create-react-app". Open terminal and type:
npx create-react-app testing-project
OR
npm init react-app testing-project
OR
yarn create react-app testing-project

Then in terminal type:

cd testing-project npm start

"npm start" runs the project if it is successfully built.

Installing react-bootstrap

Open the project in the text-editor (VsCode in my case) and type in the terminal:
npm install react-bootstrap bootstrap

Tip : To open the terminal in VsCode, shortcut key is " ctrl + ~ "

Navigate to index.js" inside the /src folder and add the following line to import all styles from "bootstrap"

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

All done😀. Lets test it out.

Simple Button Component

Go to the app.js file and import a bootstrap-react-component and the remaining code;
import {Button} from 'react-bootstrap'

import React from "react";
import { Button } from "react-bootstrap";

function App() {
  return (
    <div className="my-4">
      <Button variant="primary" className="mx-4">
        Primary Button
      </Button>
      <Button variant="secondary">Secondary button</Button>
    </div>
  );
}

export default App;

Run the project if its not running. Go to terminal and type :

npm start

Here is the ouput: Woaaaah🥳🥳🥳

my & mx are used for applying margins in bootstrap

variant is similar to bootstrap classes but its specifically used inside the bootstrap-react-components"

Tip : Another way of importing Component in react-bootstrap is this:

import Button from 'react-bootstrap/Button'

which is a bit complex as compared to like we imported earlier.We used Destructuring to grab the component which we wanted from whole library of react-bootstrap.Similarly this method can be used to import other components like in the another example below.

Another Example: Card Component

import React from "react";
import { CardGroup, Card, Container } from "react-bootstrap";

function App() {
  return (
    <>
      <Container className="mt-5">
        <CardGroup>
          <Card>
            <Card.Img
              variant="left"
              src="https://images.pexels.com/photos/3914753/pexels-photo-3914753.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
            />
            <Card.Body>
              <Card.Title>Card title</Card.Title>
              <Card.Text>
                This is a wider card with supporting text below as a natural
                lead-in to additional content. This content is a little bit
                longer.
              </Card.Text>
            </Card.Body>
            <Card.Footer>
              <small className="text-muted">Last updated 3 mins ago</small>
            </Card.Footer>
          </Card>
        </CardGroup>
      </Container>
    </>
  );
}

Lets break it down a bit :)

First we destructured the Components we wanted as CardGroup, Card, Container.

Container gives us the standard margins and some decrease in width.

Now Inside the Card component we can use all the available classes which are written with dot after the component to provide all the properties.

Following output is provided after running the script:

Conclusion

To see all the Component Examples like above...Visit the official React-bootstrap website
(https://react-bootstrap.github.io/)
✌️

DEV Community