Utilities

Responsive Floats

blah

    
<div class="pull-xs-left">Float left on all viewport sizes</div>
<div class="pull-xs-right">Float right on all viewport sizes</div>
<div class="pull-xs-none">Don't float on all viewport sizes</div>

<div class="pull-sm-right">Float right on viewports sized SM (small) or wider</div>
<div class="pull-md-right">Float right on viewports sized MD (medium) or wider</div>
<div class="pull-lg-right">Float right on viewports sized LG (large) or wider</div>
<div class="pull-xl-right">Float right on viewports sized XL (extra-large) or wider</div>
    
  

Spacing

Assign margin or padding to an element with a spacing utility class. All classes are multiples of 20px. Use of these classes is explicitly stating your intention to override any pre-existing margin or padding styles.

Class names use the format: [property]-[side]-[size] where [property] is m for margin or p for padding. [side] is t for top, b for bottom, l for left, and r for right. [size] is 0 to remove margin or padding, sm is for 20px, md is 30px, and lg is 40px.

    
.p-sm {
  padding: 20px !important;
}

.m-lg {
  margin: 40px !important;
}

.m-t-0 {
  margin-top: 0 !important;
}

.m-t-xs {
  margin-top: 10px !important;
}

.m-t-sm {
  margin-top: 20px !important;
}

.p-b-md {
  padding-bottom: 30px !important;
}

.p-b-lg {
  padding-bottom: 40px !important;
}