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>
