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 copying the stylesheet <link> into the <head> section of our HTML document.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
The stylesheet link loads the bootstrap CSS file. Many of the built-in components in Bootstrap require the use of JavaScript to function.
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
We are building a simple application that does not need the addition of these files. However, if you want to include these, add them near the end of your HTML document, right before the closing </body> tag.
Aside: If you are wondering what integrity and crossorigin attributes are, refer to this StackOverflow answer.