This task involves designing the user interface of the “Rock, Paper, Scissors” game. Steps include adding game buttons, utilizing Bootstrap containers for layout, and implementing a responsive grid.
Bootstrap is primarily used for two main utilities:
In this context, “responsive” means the layout and styling adjust dynamically, enabling the webpage to render well on any device or screen size. For more information, refer to this Wikipedia entry or Responsive Web Design - What It Is And How To Use It.
We will utilize both of these utilities in our application. To start, let’s add three buttons to the page (within the body
tag):
After saving the file, open it in the browser. Notice that the buttons are too close to the edge of the page.
We’ll address this issue in the next step.
Start by wrapping the buttons in a Bootstrap container
:
After saving the page, view it in the browser.
You might notice that the buttons are too close to the top of the page. This can be easily fixed by using Bootstrap shorthand for margin:
The my-5
class adds a margin to the top and bottom of its HTML element. Bootstrap provides a variety of shorthand for margin and padding to adjust an element’s appearance. You can read more about it here.
Then save the page and view it in the browser again.
We will use Bootstrap’s Grid system to distribute the buttons with even spacing:
Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. The grid system is divided into 12 columns, allowing you to create various layouts for different screen sizes.
You can create a basic grid system by adding a container
class to an element to center it and give it a max width. Inside the container, you use a row
class to create a new row. Then inside the row, you can add col
classes to create columns.
The grid system also supports offset and ordering classes for additional layout options.
Save the page and view it in the browser.