It's not easy to get a web app to look the way you want it to. Sometimes it can feel like HTML and CSS are teaming up against you. The good news is that there's help in the form of frontend frameworks like Bootstrap. Bootstrap is designed to make web development faster and less painful while offering styling templates for common elements. There is a React-specific package that dovetails nicely with React's component model to save you time while making your project look better.
Bootstrap provides solid guidance for how to add their styling to a React app. Start by using npm to install the Bootstrap and React Bootstrap packages:
npm install react-bootstrap bootstrap
Next, add the following import at the top of your App.js file:
import 'bootstrap/dist/css/bootstrap.min.css'
You'll also need to import the individual React Bootstrap components you use. I'll show several examples, but it's a lot like importing other React components wherever you use them.
For the first example, let's keep things simple. Imagine you are in the process of adding a button to a web page. You'd likely need a button tag:
<div>
<button>Example</button>
</div>
The results of using nothing but the code above are pretty plain:
Though it may conjure up nostalgia for your first forays into the world of HTML, undecorated elements like this one are the unpainted houses of web design. Their presence suggests that your app belongs to a lower tier of design and craftsmanship. Fortunately, Bootstrap gives you a visual boost right out of the box. Here's what the code for a one-button app looks like with Bootstrap:
import React from "react";
import { Button } from "react-bootstrap";
import 'bootstrap/dist/css/bootstrap.min.css'
function App() {
return (
<div>
<Button>Example</Button>
</div>
);
}
export default App;
It's important to note that the Button element here is capitalized, just like your other React components. It's also imported from "react-bootstrap" in the second line. Here's what you'll get for those minimal efforts:
That's a much nicer button to look at, and all without needing to dive into any CSS. Rounded corners, color, new font - Bootstrap handles those details for you. In fact, you'll be able to modify things like position, alignment, and further styling easily. Bootstrap has already created a vast library of classes that you can add to your elements and components to get the look you want.
Let's say you wanted to center that button horizontally and move it a little below the top of the screen. You're just a few classes away:
<div className="d-flex" >
<Button className="mx-auto mt-5" >Example</Button>
</div>
And here's the result:
If you've ever done any web development you'll understand why centering an element and making it look nice with just a few lines of code is a big deal. I needed to do two things in the code to get the button where I wanted it. First I added the d-flex class to the parent div. This creates a screen-width flexbox for its children to reside in. CSS flexbox layout is a helpful concept to understand whether you're using Bootstrap or not, so if that term is unfamiliar to you check out this great resource. Once the flexbox is established we added the mx-auto and mt-5 classes to the button itself. The mx-auto class sets the margins in the horizontal direction (think x-axis) to automatically adjust to center the element. It's all there in the class name: "m" for margin, "x" for horizontal, and "auto" to center it automatically. mt-5 follows similar conventions, setting the top margin (see the "t"?) to a 5 on Bootstrap's scale.
Those programmatically named classes are a central piece of what makes Bootstrap so useful. Their documentation gives plenty of resources for dialing in your style. Below are a few more examples. Some styling qualities, such as the variant, or the size of the button font can be distinct attributes rather than just class names:
<Button className="mx-auto mt-3" variant="success" >Success</Button>
<Button className="mx-auto mt-3" variant="danger" >Danger</Button>
<Button className="mx-auto mt-3" variant='outline-primary' >Outline</Button>
<Button className="mx-auto mt-3" size="sm" >Small</Button>
<Button className="mx-auto mt-3" size="lg" >Large</Button>
If it seems like there's a lot to remember, don't worry - Bootstrap React's documentation gives lots of examples for just about any kind of component you can imagine. Cards, alerts, forms, and even whole navbars are all there ready to be added to your projects. In each example, they provide multiple variations with the code inserted into live editors so you can toy around with it further and make it your own. Consider it one-stop shopping for all your styling needs.
One thing that's helpful to understand as you begin adding Bootstrap React elements to your project is how to get them to play nice and line up relative to one another. As you structure each view in your app, imagine all of the elements and components residing in specific rows and columns. You get to determine how each of these rows and columns are aligned within the parent, and how many of each there are. Here's how that can look:
import { Container, Row, Col } from "react-bootstrap";
<div className="App bg-secondary" >
<Container className="text-center ">
<Row>
<Col>First column, top row</Col>
<Col>Second column, top row</Col>
</Row>
<Row>
<Col>Only column in bottom row</Col>
</Row>
</Container>
</div>
In this example, I wanted to have two elements next to one another with a third below it aligned in the center. To accomplish any alignment I like to start from the outside and work my way in. My example describes a big box with two rows in it: one for the top two pieces of text and another row below for the third. We'll call the big box a Container and give it two Rows. I want the top two elements next to one another and spaced evenly, so I provide an additional Col for each to be centered in. The two columns will share the row evenly unless otherwise specified. The Row below gets one Col so that its text can be in the center of the Container horizontally. I also gave the main div classes of App and bg-secondary. The App class provides padding and rounded corners for the child container while bg-secondary makes the Container a nice gray color for contrast against the background. I should also point out that the Container Row and Col components all have flexbox properties by default so you don't need to add the d-flex class. This process of aligning and spacing elements may seem arduous at first, but after a little practice, it becomes second nature. If you're ever having trouble getting things to line up the way you want just envision the big divisions of space that will define that part of the page and use Rows and Cols to create those spaces for your elements.
Finally, I'd like to point out that there are lots of options for changing the appearance of Bootstrap from its default. By far the easiest way to mix things up is by employing a theme from Bootswatch. Bootswatch is a collection of Bootstrap themes that MIT licenses for free use. Just apply a new theme to your existing project and watch it change. And the best part is that it only takes one line of code to make the swap.
Let's use our buttons as an example:
If we don't want these buttons to have the default Bootstrap styling we can choose the "Journal" theme from Bootswatch and presto:
New fonts, accents, and color schemes, across every component in your React app. All you need to do is install Bootswatch with npm install bootswatch and then replace the .css file import in your App.js file:
// remove this one: import 'bootstrap/dist/css/bootstrap.min.css'
// add the one below
import "bootswatch/dist/journal/bootstrap.min.css";
That's all it takes to swap into a fresh theme. If you've already got several components created, it's worth looking at each one to make sure the new look doesn't clash with any other style choices or colors you already added. If you want a different profile from this point, all you have to do is replace "journal" in the import above with a different Bootswatch theme.
If you want even more customization to have a look that won't be found anywhere else, you can use SASS to edit Bootstrap's _variables.scss file, but that'll have to wait for a different blog post. Have fun styling your next project with Bootstrap React and switching up the theme with Bootswatch!
Helpful Resources: