UI Elements / Utility Classes

Borders
Class Description
.bordered
 Add borders.
.border-t
 Add top border.
.no-border
 Remove borders.
.no-border-hr
 Remove horizontal borders.
.no-border-vr
 Remove vertical borders.
.no-border-t
 Remove top border.
.no-border-r
 Remove right border.
.no-border-b
 Remove bottom border.
.no-border-l
 Remove left border.
Margins
Class Description
.no-grid-gutter-h
 Make div page-wide. Add negative margins == Gutter grid size.
.panel-wide
 Make div panel-wide. Add negative margins == Panel body padding.
.grid-gutter-margin-b
 Add bottom grid gutter margin.
.form-group-margin
 Add bottom form-group's margin.
.no-margin
 Remove margins.
.no-margin-hr
 Remove horizontal margins.
.no-margin-vr
 Remove vertical margins.
.no-margin-t
 Remove top margin.
.no-margin-b
 Remove bottom margin.
Paddings
Class Description
.panel-padding
 Add panel body's padding.
.grid-gutter-padding-h
 Add grid column's padding.
.tab-content-padding
 Add tab content's padding.
.panel-padding-h
 Add horizontal panel body's padding.
.padding-sm
 Small padding.
.padding-sm-hr
 Small horizontal padding.
.padding-xs-hr
 Extra small horizontal padding.
.padding-sm-vr
 Small vertical padding.
.padding-xs-vr
 Extra small vertical padding.
.no-padding
 Remove padding.
.no-padding-hr
 Remove horizontal padding.
.no-padding-vr
 Remove vertical padding.
.no-padding-t
 Remove top padding.
.no-padding-b
 Remove bottom padding.
Horizontal and vertical text align
Class Description
.text-left
 Left-aligned text.
.text-center
 Center-aligned text.
.text-right
 Right-aligned text.
.text-left-sm
 Left-aligned text on small screens.
.text-center-sm
 Center-aligned text on small screens.
.text-right-sm
 Right-aligned text on small screens.
.text-left-md
 Left-aligned text on medium screens.
.text-center-md
 Center-aligned text on medium screens.
.text-right-md
 Right-aligned text on medium screens.
.text-left-lg
 Left-aligned text on large screens.
.text-center-lg
 Center-aligned text on large screens.
.text-right-lg
 Right-aligned text on large screens.
.valign-top
 Aligned top text in table cells.
.valign-middle
 Aligned middle text in table cells.
.valign-bottom
 Aligned bottom text in table cells.
You can mix responsive classes to align text depending to the screen size.
Text sizes
Class Description
.text-xs
 Extra small text.
.text-sm
 Small text.
.text-bg
 Big text.
.text-lg
 Large text.
.text-xlg
 Extra large text.
.text-slg
 Super large text.
Text weights
Class Description
.text-slim
 Slim text.
.text-normal
 Normal text.
.text-semibold
 Semibold text.
.text-bold
 Bold text.
Text colors
Class Description
.text-default
 Default text.
.text-success
 Success text.
.text-danger
 Danger text.
.text-warning
 Warning text.
.text-info
 Info text.
.text-light-gray
 Light gray text.
Backgrounds
Class Description
.bg-default
 Default background.
.bg-success
 Success background.
.bg-danger
 Danger background.
.bg-warning
 Warning background.
.bg-info
 Info background.
.bg-panel
 Panel heading's background.
.no-bg
 Remove background.
Rounded borders
Class Description
.rounded
 Round element.
.no-border-radius
 Remove rounded borders.
Columns sizing
Class Description
.col-sm-auto
 Set width: auto on small screens.
.col-md-auto
 Set width: auto on medium screens.
.col-lg-auto
 Set width: auto on large screens.