mmp460

Resources for MMP 460: Multimedia Project Lab

slack

Syllabus
Contact

Complex CSS layout with Bootstrap

Review:

Using multiple grid class for different column arrangement in different viewports

Unless you are using the classes col-xs- all columns collapse in small viewport (under 768px). To still have column-based layout in small viewport use multiple grid classes. For example the following code creates 6 columns in viewport bigger than or equal to 768px and 3 columns in viewport sizes smaller than 768px.

    <div class="col-xs-4 col-sm-2">......</div>
    <div class="col-xs-4 col-sm-2">......</div>
    <div class="col-xs-4 col-sm-2">......</div>
    <div class="col-xs-4 col-sm-2">......</div>
    <div class="col-xs-4 col-sm-2">......</div>
    <div class="col-xs-4 col-sm-2">......</div>

Nesting columns

The following code shows how to create a layout similar to the image below. The nested grid is inside one of the columns. Full code is here.

nested-grid

    <div class="container">
      <div class="row">
        <div class="col-sm-8">
        <!-- *******   nested columns ******* -->
          <div class="row">
            <div class="col-sm-12">....</div>
          </div> <!-- .row --> 
          <div class="row"> 
            <div class="col-sm-4">....</div> 
            <div class="col-sm-4"> </div>
            <div class="col-sm-4"> </div>  
          </div><!-- .row --> 
        </div> <!-- .col-sm-8 --> 	
        <div class="col-sm-4">....</div> 
      </div> <!-- .row --> 
    </div> <!-- .container -->