Main layout
In Bootstrap, a grid is a container composed of rows, each with 12 columns. A class attribute is used to define the type ofdiv.
So, in our case, we would like to have the product list occupy two-thirds of the screen, with the cart getting the rest of row.
The structure of the body in our index.scala.html is as follows:
<body>
<div class="container">
<div class="row">
<div id="productPanel" class="col-8">
<div id="products" class="row"></div>
</div>
<div id="cartPanel" class="col-4"></div>
</div>
</div>
</body>
