Step 4

Wrap the buttons in a Bootstrap container:

<body>
+ <div class="container">
    <button>Rock</button>
    <button>Paper</button>
    <button>Scissors</button>
+ </div>
</body>

Note: the above code snippet is displayed in the "diff" format. In this format, each changed line is prepended with a + or a - symbol. The + indicates a line added to the code. The - shows a line removed from the code. You should not copy the + or - symbols when you copy this to your source code. Instead, you must remove the lines highlighted with - from your code and add those highlighted with +.

Save the page and refresh it in the browser:

Notice the buttons are too close to the top of the page. We can easily fix this issue by using Bootstrap shorthand for margin:

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

The class my-5 adds a margin to the top and bottom of its HTML element. Bootstrap has a wide range of shorthand for margin and padding to modify an element's appearance. Read more about it here.

Save the page and refresh it in the browser:

CS280 Homepage

Step 4