The impatient n00b's guide to Getting Started with React Bootstrap

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

npm install react-bootstrap bootstrap

or

yarn add react-bootstrap bootstrap

1. In your src/index.js or App.js file, add

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

Figure out the structure

The best and easiest way to structure content is to put everything in Containers containing Rows containing Columns. 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.

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.

<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 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:

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:

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?