Step 2

To style this application, we will use the Bootstrap toolkit. Bootstrap is the most popular CSS framework for developing responsive, mobile-first websites.

We will follow the official Getting started steps to set up Bootstrap in our project. As it turns out, the process is as simple as follows:

  1. add a <link> tag in the <head> to get Bootstrap's CSS 
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
  integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
  crossorigin="anonymous"
/>
  1. add a <script> tag before the closing </body> to get their JavaScript bundle (as many of the built-in components in Bootstrap require the use of JavaScript to function).
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
  crossorigin="anonymous"
></script>

Aside: If you are wondering what integrity and crossorigin attributes are, refer to this StackOverflow answer.