Starting with react-bootstrap
Tags: bootstrap, reactbootstrap, react, components
Published: 2020-10-17 15:49:19

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v1sxx83g4m7d3ge72v48.jpeg)
####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](https://www.npmjs.com/) 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)`


&nbsp;
**_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`
>**_<mark>"npm start"</mark> 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 `
&nbsp;
**_Tip_** : To open the terminal in VsCode, shortcut key is " ctrl + ~ "



#### Navigate to <mark>_index.js_"</mark> inside the <mark>/src</mark> 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.**
&nbsp;
### **Simple Button Component**
Go to the <mark>app.js</mark> file and import a <mark>bootstrap-react-component</mark> 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🥳🥳🥳
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0dfd2uy306vy8y0w6jxj.png)

>####
* **my & mx** are used for applying <mark>margins</mark> in [bootstrap](https://getbootstrap.com/)
* **variant** is similar to bootstrap classes but its specifically used inside the bootstrap-react-components"

&nbsp;
**_Tip_** : Another way of importing Component in react-bootstrap is this:

`import Button from 'react-bootstrap/Button'`

<p>which is a bit complex as compared to like we imported earlier.We used <mark>Destructuring</mark> to grab the component which we wanted from whole library of <mark>react-bootstrap</mark>.Similarly this method can be used to import other components like in the another example below.</p>
---
### 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 <mark>Card</mark> component we can use all the available classes which are written with <mark>dot</mark> after the component to provide all the properties.

Following output is provided after running the script:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cz0bp61q28lf2pfqjgmx.png)

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