The impatient n00b's guide to Getting Started with React Bootstrap
Tags: beginners, react
Published: 2021-01-30 01:42:58

<img width="100%" style="width:100%" src="https://media.giphy.com/media/35EpkElYuNCaXzLXNA/giphy.gif">
Ok, so you've got a cool-ass app with an ugly-ass look and you want to class it up. If you're using React, then React Bootstrap is a straightforward, easy and well-documented front-end framework. But despite how straightforward, easy, and well-documented it is, you're here because time is not on your side and you just need the basic instructions to get going. I just made my ugly-ass app look pretty good using Bootstrap for the first time, so here's what I've learned.

#### Installing Bootstrap

1. install it by doing 
```javascript
npm install react-bootstrap bootstrap
```
or
```ruby
yarn add react-bootstrap bootstrap
```
2. In your `src/index.js` or `App.js` file, add
```javascript
import "bootstrap/dist/css/bootstrap.min.css";
``` 

#### Figure out the structure
The best and easiest way to structure content is to put everything in `Container`s containing `Row`s containing `Column`s. For example, let's say you want a common layout like this one (pictured) on the website for [Ember's stupid and overpriced self-heating mugs that I totally want](https://ember.com/?gclid=CjwKCAiAgc-ABhA7EiwAjev-jxGU7oHSMDiHxZqZ6OFogyfvAEelo5dZ_nTK53Ae596nl6MYPYjZCBoCFd8QAvD_BwE).

<img width="100%" style="width:100%" src="https://raw.githubusercontent.com/mathlete01/images/main/ember.png">

Let's break up this structure into Containers, Rows, and Columns:
* At the top we have a headline
* Below that, we have a description
* Below that, we have two images, side by side
* Below that, we have three benefits, each with an image, a header, and a description.

```jsx
<Container>
  <Row> 
    <h2>The World's First Temperature Control Mugs</h2> 
  </Row>
  <Row> 
    Ember’s patented technology allows you to set the 
    precise temperature of your hot beverage, so you can 
    enjoy your drink from the first sip to the last drop. 
  </Row>
  <Row>
    <Col> 
      <img src="BlackTravelMug.png>
    </Col>
    <Col> 
      <img src="WhiteMug.png>
    </Col>
  </Row>
  <Row> 
    <Col>
      <Container>
         <Row><img src="thermometer.png"></Row>
         <Row><h4>Keep your drink perfectly hot</h4</Row>
         <Row>
              Set your desired drinking temperature. Start 
              with 135°F (57°C) and adjust from there.
         </Row>
      </Container>
    </Col>
    <Col>
      <Container>
         <Row><img src="battery.png"></Row>
         <Row><h4>Long lasting battery</h4</Row>
         <Row>
              Enjoy Ember’s new extended battery life while 
              on-the-move, or keep on the included charging 
              coaster for all day use.
         </Row>
      </Container>
    </Col>
    <Col>
      <Container>
         <Row><img src="smartphone.png"></Row>
         <Row><h4>Control with smartphone</h4</Row>
         <Row>
              Pair with the Ember app to set your 
              temperature, customize presets, receive 
              notifications and more.
         </Row>
      </Container>
    </Col>
  </Row>
</Container>
```
#### Decide which Bootstrap components you need
In the example above, we're using these new components called `Container`, `Row`, and `Col`. We get these just by importing them. Visit [react-bootstrap.github.io/components](https://react-bootstrap.github.io/components/alerts/) and explore the wonderland of different widgets you can use in your app. Find something you want, scroll to the bottom, and in the section called API you can copy the code you need to import. You also have to import `React` itself, so for those three components, the code is:
``` jsx
import React from "react";
import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
```
Just put that code at the top of your page and you can use 'em. So easy! 

Wrap the component code in a `<div>` and you're good to go! The final code would be something like this:
``` jsx
import React from "react";
import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'

class App extends React.Component {
<div>
 <Container>
  <Row> 
    <h2>The World's First Temperature Control Mugs</h2> 
  </Row>
  <Row> 
    Ember’s patented technology allows you to set the 
    precise temperature of your hot beverage, so you can 
    enjoy your drink from the first sip to the last drop. 
  </Row>
  <Row>
    <Col> 
      <img src="BlackTravelMug.png>
    </Col>
    <Col> 
      <img src="WhiteMug.png>
    </Col>
  </Row>
  <Row> 
    <Col>
      <Container>
         <Row><img src="thermometer.png"></Row>
         <Row><h4>Keep your drink perfectly hot</h4</Row>
         <Row>
              Set your desired drinking temperature. Start 
              with 135°F (57°C) and adjust from there.
         </Row>
      </Container>
    </Col>
    <Col>
      <Container>
         <Row><img src="battery.png"></Row>
         <Row><h4>Long lasting battery</h4</Row>
         <Row>
              Enjoy Ember’s new extended battery life while 
              on-the-move, or keep on the included charging 
              coaster for all day use.
         </Row>
      </Container>
    </Col>
    <Col>
      <Container>
         <Row><img src="smartphone.png"></Row>
         <Row><h4>Control with smartphone</h4</Row>
         <Row>
              Pair with the Ember app to set your 
              temperature, customize presets, receive 
              notifications and more.
         </Row>
      </Container>
    </Col>
  </Row>
 </Container>
</div>
}

export default App
```
voilà! Not so hard, eh n00b?