A big part of writing web applications is having a UI Kit to help create the interface of the application. We are going to use Bootstrap for our note taking app. While Bootstrap can be used directly with React; the preferred way is to use it with the React Bootstrap package. This makes our markup a lot simpler to implement and understand.

We also need a couple of icons in our application. We’ll be using the React Icons package for this. It allows us to include icons in our React app as standard React components.

Installing React Bootstrap

Run the following command in your frontend/ directory and not in your project root

$ npm install react-bootstrap@1.6.1 react-icons@4.2.0 --save

This installs the npm packages and adds the dependencies to your package.json of your React app.

Add Bootstrap Styles

React Bootstrap uses the standard Bootstrap v3 styles; so just add the following styles to your public/index.html.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
  integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
  crossorigin="anonymous"
/>

We’ll also tweak the styles of the form fields so that the mobile browser does not zoom in on them on focus. We just need them to have a minimum font size of 16px to prevent the zoom.

To do that, let’s add the following to our src/index.css.

select.form-control,
textarea.form-control,
input.form-control {
  font-size: 1rem;
}
input[type=file] {
  width: 100%;
}

We are also setting the width of the input type file to prevent the page on mobile from overflowing and adding a scrollbar.

Now if you head over to your browser, you might notice that the styles have shifted a bit. This is because Bootstrap includes Normalize.css to have a more consistent styles across browsers.

Next, we are going to create a few routes for our application and set up the React Router.