Using vanilla Bootstrap with React

A Beginner’s Guide

Photo by Oziel Gómez on Unsplash

I was recently given the challenge of coding a simple single page app that delivers new users a unique URL where they can add potential baby names to a list. using. I decided to React along with Bootstrap 4.5 to build the app. I’ve played with Bootstrap before , but never to its full potential. This was a chance to dig into Bootstrap’s documentation and hopefully gain some confidence using the popular framework in future projects.

Bootstrap is a styling framework that includes javascript and prebuilt css. It aims to provide predictable and consistent results to the look and responsiveness of your app, with a minimum of CSS. The overarching structure is based on the CSS Flex-box layout which is described in this great article.

A Complete Guide to Flexbox | CSS-Tricks

Bootstrap has put together a React version of the framework that packages most of the features into React components, but I chose to stick with the vanilla version so I could transfer the skills to a non-React environment.

After setting up a boiler plate React app with a simple App.js component, I imported Bootstrap into the project using npm:

npm install jquery popper.js
npm install bootstrap

In the index.js I link to Bootstrap’s CSS which is included in the Bootstrap package.

import ‘bootstrap/dist/css/bootstrap.min.css’;

Note that Bootstrap requires two utilities, JQuery and Popper, to assist in some of the animation. If you don’t install them, you’ll receive an error.

Bootstrap’s basic structure relies on a div with the container class. (Remember when working in React that “class” is a reserved word, so we use “className” instead. This means refactoring if you copy any code from the Bootstrap documentation.)

// add to App.js

<div className='container bg-light shadow' >
<p className='display-2' > I'm the container </p>
</div>

After firing up the React server you should see text across the top in the container which itself is centered. If you adjust the width of the browser window you’ll see the container snapping to its new width as the window reaches one of the four breakpoints. Hint, open developer tools on the right to see the width of window displayed in the upper right hand corner.

xs < 540 px
sm >540
md >720
lg > 960
xl >1140

Change the className from “container” to “container-fluid” and now the container resizes itself continuously.

After setting up the container sections of your page can be added using divs that Rows and Columns. Rows are divided into 12 equal sections. The following will create even columns of 6 spaces each. Notice that the columns are also responsive.

<div className='container bg-light shadow' >
 <p className='display-2' > I'm the container </p>
  <div className='row text-primary'>
    <div className='col '>Column 1</div>
    <div className='col bg-warning text-secondary'>Column 2</div>
  </div>
</div>

Now add -sm to the col (col-sm). What happens? Now the columns collapse when the width of the window is less than the sm breakpoint, stacking the columns. If you change to -md the columns collapse sooner.
Add -4 to one col (col-4) and col-8 to the second. Now the columns are different relative widths (col-sm-4).

So far we’ve concerned ourselves with how Bootstrap lays out the widths of our projects’ sections. The height of the columns is dictated by the tallest column of the row. The vertical position of the other columns can be adjusted using align-self-(start, center or end). Try adding align-self-end to column 2. Now column 2 is forced to the bottom of the row.

<div className='container bg-light shadow' >
  <p className='display-2 ml-5'>I'm the container</p>
  <div className='row text-primary'>
    <div className='col-sm'>
      <h4 className='text-center'> Column 1 </h4>
      <p>This is a really long statement to fill up this column.</p>
    </div>
    <div className='col-sm h4 bg-warning text-secondary align-self-end'>
    Column2</div>
  </div>
</div>

I want to take a few moments to look at the other notation included in the classNames of the samples above. Much of your basic formatting can be controlled directly from the Bootstrap utilities as they are referred to in the Bootstrap documentation (although writing styling using traditional CSS or inline still works.). This is code that lives in the classNames and usually includes what you want to style followed by a dash (-), and then how (or by how much) you want that aspect styled:

<div className="mt-5"> //large top margin

margins: set using m(t,b,l,r,x,y)-(12345). So ml-5 places the greatest margin on the left side of the element (x = left & right, y = top&bottom).
padding: same system as above but using p
background color: bg-primary
text color: text-primary
text alignment: text-(left, center, right)
shadow: shadow-(none, sm, (blank for default),lg)
border radius: rounded

Text and background colors can likewise be set with utilities. Bootstrap comes with a default color pallet of 10 colors.

This article’s goal was to provide a hand’s on introduction to Bootstrap. Hopefully by now you’ve gained some basic confidence. Next stop, check out the Bootstrap documentation. There are a-lot of prebuilt components that, along with the tips above, can give you a fairly professional looking and responsive product. Bootstrap’s default themes can be customized as well (fonts, color pallet, etc). The process is a bit cumbersome, but I found a great site that allows you to set up themes in a simple UI. When you’re finished, the site will generate the CSS to change Bootstrap’s defaults: https://themestr.app/theme

Enjoy making beautiful content!