Utility classes http://getbootstrap.com/css/#helper-classes

Spacing

Assign margin or padding to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. All classes are multiples on the global default value, 10px.

The classes are named using the format: {property}-{sides}-{size}

Where property is one of:

• m - for classes that set margin
• p - for classes that set padding

Where sides is one of:

• t - for classes that set *-top
• b - for classes that set *-bottom
• l - for classes that set *-left
• r - for classes that set *-right
• x - for classes that set both *-left and *-right
• y - for classes that set both *-top and *-bottom
• a - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

• 0 - for classes that eliminate the margin or padding by setting it to 0
• 1 - (by default) for classes that set the margin or padding to $spacer-x or $spacer-y
• 2 - (by default) for classes that set the margin or padding to $spacer-x * 1.5 or $spacer-y * 1.5
• 3 - (by default) for classes that set the margin or padding to $spacer-x * 2 or $spacer-y * 2
• 4 - (by default) for classes that set the margin or padding to $spacer-x * 3 or $spacer-y * 3

Here are some representative examples of these classes:

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

.m-l-1 {
  margin-left: $spacer-x !important; /* 10px */
}

.p-x-2 {
  padding-left: ($spacer-x * 1.5) !important; /* 15px */
  padding-right: ($spacer-x * 1.5) !important; /* 15px */
}

.p-y-3 {
  padding-top: ($spacer-y * 2) !important; /* 20px */
  padding-bottom: ($spacer-y * 2) !important; /* 20px */
}

.p-a-4 {
  padding: ($spacer-y * 3) ($spacer-x * 3) !important; /* 30px 30px */
}
    

Horizontal centering

Additionally, PixelAdmin also includes an .m-x-auto class for horizontally centering fixed-width block level content by setting the horizontal margins to auto.

Borders

Set borders to an element or a subset of its sides with shorthand classes.

The classes are named using the format: b-{sides}-{size}

Where sides is one of:

• t - for classes that set *-top
• b - for classes that set *-bottom
• l - for classes that set *-left
• r - for classes that set *-right
• x - for classes that set both *-left and *-right
• y - for classes that set both *-top and *-bottom
• a - for classes that set a border on all 4 sides of the element

Where size is one of:

• 0 - for classes that eliminate borders by setting its border-width to 0
• 1 - for classes that set the border-width to 1px
• 2 - for classes that set the border-width to 2px
• 3 - for classes that set the border-width to 3px

Here are some representative examples of these classes:

.b-t-0 {
  border-top-width: 0 !important;
}

.b-l-1 {
  border-left-width: 1px !important;
  border-left-style: solid !important;
}

.b-x-2 {
  border-left-width: 2px !important;
  border-left-style: solid !important;

  border-right-width: 2px !important;
  border-right-style: solid !important;
}

.b-a-3 {
  border-width: 3px !important;
  border-style: solid !important;
}
    

Blocks

.page-block - adds horizontal padding and negative horizontal margins (which equals .px-content's horizontal padding) to the element.

  ...
  
  

  ...

    

.page-wide-block - adds negative horizontal margins (which equals .px-content's horizontal padding) to the element.

  ...
  
  

  ...

    

.panel-block - adds horizontal padding (which equals .panel-body's horizontal padding) to the element. Also adds negative margins when the element is within a .panel-body block.

  ...
  
  

  ...
  
  

    
    

  
  ...

    

.panel-wide-block - adds negative horizontal margins (which equals .panel-body's horizontal padding) to the element.

  ...
  
  

    
    

  
  ...

    

.width-{breakpoint}-auto classes set element's width property to auto depending on the current viewport size.

Where breakpoint is one of:

• xs - Extra small screens (mobile)
• sm - Small screens (tablets / mobile)
• md - Medium screens (desktops / tablets)
• lg - Large screens (desktops)
• xl - Extra large screens (desktops)

  Element will reset width property only if viewport width is between 479px and 768px

    

Display

.display-{mode} classes set element's display property to mode.

• block
• inline-block

Position

.position-{mode} classes set element's position property to mode.

• static
• relative
• absolute

Inline image

Floating

These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the CSS float property. !important is included to avoid specificity issues. These use the same viewport width breakpoints as the grid system.

Vertical alignment

Easily set vertical alignment of the element.

Text alignment

Easily realign text to components with text alignment classes.

For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.

Text transform

Transform text in components with text capitalization classes.

Font weight and italics

Quickly change the weight (boldness) of text or italicize text.

Line height

Quickly change the line-height of text.

Text-decoration

Font sizes

Quickly change the font size of text.

Border radius

Quickly change the border-radius of the element.

Contextual text colors

Contextual backgrounds

Note: .bg-* classes also set the element's border-color property.

Contextual border colors