simplebootstrapgridexamples

simplebootstrapgridexamples.html

<!-- First Row -->
<div class="container">
  <div class="row example">
      <div class="col-md-6 col-sm-6 col-xs-12 teal">
          I am 50% at 'md' and 'sm' but 100% at 'xs'
      </div>
      <div class="col-md-6 col-sm-6 col-xs-12 orange">
          I am the same as the column next to me
      </div>
  </div>
</div>
<!-- Second Row -->
<div class="container">
  <div class="row example">
      <div class="col-md-12 green">
          I am 100% all the time since I am md-12 and nothing else!
      </div>
  </div>
</div>
<!-- Third Row -->
<div class="container">
  <div class="row example">
      <div class="col-md-3 col-sm-6 col-xs-12 purple">
          md-3 sm-6 xs-12
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12 red">
          md-3 sm-6 xs-12
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12 yellow">
          md-3 sm-6 xs-12
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12 blue">
          md-3 sm-6 xs-12
      </div>
  </div>
</div>
<!-- Fourth Row -->
<div class="container">
  <div class="row example">
      <div class="col-md-4 col-sm-4 col-xs-4 blue">
          md-4 sm-4 xs-4
      </div>
      <div class="col-md-4 col-sm-4 col-xs-4 purple">
          md-4 sm-4 xs-4
      </div>
      <div class="col-md-4 col-sm-4 col-xs-4 green">
          md-4 sm-4 xs-4
      </div>
  </div>
</div>