Break Points

Breakpoints list

You can use breakpoints in order to change the width of a column on diferent devices

Prefix Container width Example
xl > 1280px col-w-xl-3
lg res > 1024 col-w-lg-4
md res > 768px col-w-md-6
sm res > 576px col-w-xl-12
none > 576px default col-3
<div class="row ">
  <div class="col col-w-sm-12  col-w-md-6 ">
      I'm a full width on small screen but half on medium up 
  </div> 
  <div class="col col-w-12  col-w-md-6 col-w-lg-4 ">
    Im full width on sm, half on md and 1/4 on large
  </div>
</div>

I'm a full width on small screen but half on medium up

I'm full width on sm, half on md and 1/3 on large

On this page