Step 5

We will use Bootstrap's Grid system to distribute the buttons with even spacing:

<body>
  <div class="container my-5">
+   <div class="row">
+     <div class="col">
        <button>Rock</button>
+     </div>
+     <div class="col">
        <button>Paper</button>
+     </div>
+     <div class="col">
        <button>Scissors</button>
+     </div>
+   </div>
  </div>
</body>

Save the page and refresh it in the browser:

Tip: we are going to use an extension for VSCode called Live Server which allows us to serve (open) an HTML file in a browser as if it was served from (deployed on) a (web) server. It also automatically refreshes the page every time we save changes to the source files.

If you don't know how to install extensions on VSCode, consult this document

Once the extension is installed, right-click on index.html and select "Open with live sever." This action will open your browser and point it to http://127.0.0.1:5500/index.html. Now when you change index.html (and save the changes), the page in the browser will be refreshed automatically.

CS280 Homepage

Step 5