Helpers

Body min width

You can set the min-width on your body by applying the min-width-1024 or min-width-1170 class

Remember that the responsivity of your app will be governed by your column definitions. For example, if you have col-md-# definitions, the view will change when shrinking the viewport below medium. We recommend defining your columns down to col-xs-# for scalability.

Margin helpers

Use margin helpers to apply 15 or 30px of margin top, bottom, right, or left to an object. Examples: margin-top-15, margin-bottom-30, margin-right-30, and margin-left-15, respectively.

Padding helpers

Use padding helpers to apply 15 or 30px of padding top, bottom, right, or left to an object. Examples: padding-top-15, padding-bottom-30, padding-right-30, and padding-left-15, respectively.

No padding helpers

Use no padding helpers to remove padding on an object. Examples: no-all-padding, no-top-padding, no-left-padding, no-right-padding, and no-bottom-padding.

Removing gutters

no-gutter can be applied to a row to make each column flush with its siblings

This content is flush with the container
This content is flush with the container
This content has right and left padding
As does this content
<div class="style-guide-grid">
  <div class="row no-gutter">
    <div class="col-md-8">This content is flush with the container</div>
    <div class="col-md-4">This content is flush with the container</div>
  </div>
  <div class="row">
    <div class="col-md-8">This content has right and left padding</div>
    <div class="col-md-4">As does this content</div>
  </div>
</div>

Border Bottom helper

Use border bottom helper to apply a thin bottom border using the default border-gray color. Example: border-bottom.

I have a bottom border!
<div>
  <div class="row border-bottom">
    I have a bottom border!
  </div>
</div>

No border helpers

Use no border helpers to remove borders on an object. Examples: no-all-border, no-top-border, no-left-border, no-right-border, and no-bottom-border.

No box shadow helper

Use no box shadow helper to disable the box shadow on an element. Example: no-box-shadow.

I have box shadow.

No box shadow here.
<div>
  <div class="row panel">
    I have box shadow.
  </div>
  <br>
  <div class="row panel no-box-shadow">
    No box shadow here.
  </div>
</div>

Hide overflow (scrollbars)

Use the hide overflow helpers to remove scrollbars on a container. Examples: hide-overflow (Both X and Y axis), hide-overflow-x (X-axis), or hide-overflow-y (Y-axis).