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
$ pnpm add --save bootstrap react-bootstrap react-icons
$ pnpm add --save-dev @types/bootstrap @types/react-bootstrap
This installs the packages and dependencies to the
package.json of your React app.
Add Bootstrap Styles
React Bootstrap uses the standard Bootstrap styles, so just import the style sheet.
Add it above the
import "./index.css" line in
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
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.