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
- install it by doing
npm install react-bootstrap bootstrap
or
yarn add react-bootstrap bootstrap
- In your
src/index.jsorApp.jsfile, 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?
Top comments (0)