bootstrap grid
<!----------------------- BOOTSTRAP GRID SYSTEM ------------------------> This code will create 4 boxes placed side by side, which will be dynamically positioned, according to the size of the screen. We define the following behavior: <!-- Desktop Display: we have 4 columns per row (each occupies 3 units out of 12) --> class = "col-lg-3" <!-- display large with 12/3 = 4 columns --> <!-- Tablet Display: we have 3 columns per row (each occupies 4 units out of 12) --> class = "col-md-4" <!-- display medium with 12/4 = 3 columns --> <!-- Mobile Display: we have 2 columns per row (each occupies the 6 units of 12) --> class = "col-sm-6" <!-- display small with 12/6 = 2 columns --> <!-- CODE --> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6" style="background-color:red; border:1px solid black;"> One of four columns </div> <div class="col-lg-3 col-md-4 col-sm-6" style="background-color:yellow; border:1px solid black;"> One of four columns </div> <div class="col-lg-3 col-md-4 col-sm-6" style="background-color:green; border:1px solid black;"> One of four columns </div> <div class="col-lg-3 col-md-4 col-sm-6" style="border:1px solid black;"> One of four columns </div> </div>