Styling using CSS and Bootstrap 4

1. Include the Bootstrap CSS styles in the HTML head. Instructions can be found here
   • We don’t neccessarily need to include the JS Scripts in this assignment.
   • merely doing that should make the page look something like this.

   a little better, already

2. Put a border around the 2 divs;
   • Make sure to include the stylesheet file below the bootstrap stylesheet.
   • Tip: try typing the Emmet abbreviation: link:css then hit enter. VSCode should make the element and you’ll only need to change the path.
3. In the styles.css file:
   1. set a 1px solid black; border for #welcome-screen
   2. set a 1px solid red; border for #game-screen
4. Apply Bootstrap classes to the buttons. Examples on Button Classes can be found here
   • Set the Start Game! to use the blue btn btn-primary button.
   • Set the Go! to use the green btn btn-success button.

5. Apply Bootstrap class custom-select to select dropdown. More Info about Bootstrap Select/Dropdown here

6. for the div immedietly below the 2 form, give it a class name of form-group

7. for the <input id="username" ...>, add a class of form-control

It should now look like this.

Not the best look, but it’ll do for now Let’s start building the game logic

Next: Game Logic