Styling a Single Page React App with Bootstrap

This is the final post in creating the frontend of a clocking in app on React. We’ll finish off by styling the app; using bootstrap for modals, customising the dropdown lists, and increasing the general UX of the app.

We’ll start with how our page at the end of the last post looked:

Our main focus will be refining the brilliant design above, and transform it into this:

If you want to check a deployed version of the app before reading the rest of the article, click here.

We can use Bootstrap with React for efficient styling at little cost to our app’s performance. Our first step will be obvious then:

1. Install Bootstrap to your App

Installing Bootstrap is the same as installing any other package. Navigate to your root directory and type:

npm install react-bootstrap bootstrap

Once that’s finished, you’ll need to import the Bootstrap stylesheet for the styles to be accessed. In your index.html(this should have been created with your react app and can be found in your public folder)

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

For a more detailed explanation on this step, you can read the official introduction page in the Bootstrap documentation.

2. Modal(o) Time

Being able to add a user is a great feature; however the location of this feature could be improved. Firstly, having the ability to add someone directly from the front page does not look or work clean. Instead, having a button to bring up a modal window, improves the user’s focus on the current feature of registering a new staff member.

To start we can import Bootstrap’s modal into a new component, modal.js (which we will later integrate back into App.js) . This can be done with:

import Modal from 'react-bootstrap/Modal' 

Specifying ‘Modal’ means we won’t be importing the entire Bootstrap library into our component, and just the single component we want.

Next, we’ll want to set up some states to keep track of the opening and closing of our modal using hooks. The documentation has some very nice and simple examples, we’ll be following the structure of the first example.

This also means we’ll be importing Bootstrap’s Button model into our modal.js:

import Button from 'react-bootstrap/Button'

The modal component will need to contain the addStaff.js component, specifically within the <Modal.Body> tag. This means we can remove our addStaff.js from App.js as it’s now within our new modal.

Our final modal.js component will look like this:

And the result in all it’s glory:

Props to you (pun intended) if you know who’s being added to the staff list 😉

3. Styling the Dropdown

The current default dropdown is reminiscent of a prehistoric website. Let’s spice it up and use some of Bootstrap’s fancy styling to create something more clean and easy on the eye.

Our dropdown.js from the last tutorial is a monster of a file, dealing with both getting all our current employers as well as updating states to toggle different buttons based on which employee is picked.

For the styling, we will simply be changing the <select> tag we currently have inside dropdown.js into the equivalent Bootstrap dropdown component. All code discussed in this step is therefore the return statement and its contents.

Before we start, we need to import the relevant components, for reference we will be following the tutorial found in the docs. We can firstly import the Dropdown component:

import Dropdown from 'react-bootstrap/Dropdown'

Our return before hand looked like this:

And we now will transform it to this:

And we can test to make sure the functionality remains the same:

(Yeah I know, we should’ve got rid of ‘Hello World’ a long time ago)

Now all the functionality is at the necessary level, we can start arranging the components and finish off the styling.

4. Background and Overlay

I found a free to use image for Bob’s Coffee Shop from unsplash. I added this and a grey overlay to allow all the page’s component’s to pop and avoid any inconvenient colour matching with the background.

Once we have a suitable background image downloaded, we can add to our App.css file the following:

To reflect these changes our App.js file now changes to:

And this gives us the following:

Pretty impressive, let’s continue.

5. Fonts and Positioning

The fonts being used were found on Google Fonts and are free to use. I picked some nice looking ones for the title, dates and clocking system. They were imported into index.html, similarly to loading in the Bootstrap stylesheet:

<link href=”https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Open+Sans:wght@300&display=swap" rel=”stylesheet”><link href=”https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Open+Sans:wght@300&display=swap" rel=”stylesheet”>

This was followed by assigning different classes to different components, followed by setting suitable margins, fonts, and colours. I didn’t record every step of this final design process, as a large part of these final decisions are made depending on who’s developing the site (you can check out all the CSS tweaks I’ve done in the project’s repo).

When all that was at a suitable level, voila! This is our final result!

You can visit a deployed version of the site hosted on Netlify here. Have a go at adding some new staff, and clocking them in or out!

Signing out ✌🏼