Utility classes - PixelAdmin: Responsive Bootstrap Template

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.

The .m-{side}-{size} class set on the inner element:

.m-t-1

.m-b-2

.m-l-3

.m-r-4

.m-x-1

.m-y-2

.m-a-3

.m-x-auto

The .p-{side}-{size} class set on the outer element:

.p-t-1

.p-b-2

.p-l-3

.p-r-4

.p-x-1

.p-y-2

.p-a-3

Use the .m-x-auto class for horizontally centering fixed-width block level content:

.m-x-auto

Borders

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

.b-t-1

.b-b-2

.b-l-3

.b-r-1

.b-x-2

.b-y-3

.b-a-1

Blocks

.page-block

.page-wide-block

.panel-block

.panel-wide-block

.width-xs-auto

.width-sm-auto

.width-md-auto

.width-lg-auto

.width-xl-auto

.display-block

.display-inline-block

Quickly change the element position.

.position-static

.position-relative

.position-absolute

Text with an inline image.

Header with an 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. These use the same viewport width breakpoints as the grid system.

.pull-xs-left - Float left on all viewport sizes

.pull-xs-right - Float right on all viewport sizes

.pull-xs-none - Don't float on all viewport sizes

.pull-sm-left - Float left on viewports sized SM (small) or wider

.pull-md-left - Float left on viewports sized MD (medium) or wider

.pull-lg-left - Float left on viewports sized LG (large) or wider

.pull-xl-left - Float left on viewports sized XL (extra-large) or wider

Vertical alignment

Easily set vertical alignment of the element.

.valign-top - Top-aligned

.valign-middle - Middle-aligned

.valign-bottom - Bottom-aligned

Text

.text-justify - Justified text.

.text-nowrap - No wrap text.

.text-truncate - Truncated text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.text-xs-left - Left aligned text on all viewport sizes.

.text-xs-center - Center aligned text on all viewport sizes.

.text-xs-right - Right aligned text on all viewport sizes.

.text-sm-right - Right aligned text on viewports sized SM (small) or wider.

.text-md-right - Right aligned text on viewports sized MD (medium) or wider.

.text-lg-right - Right aligned text on viewports sized LG (large) or wider.

.text-xl-right - Right aligned text on viewports sized XL (extra-large) or wider.

.text-lowercase - Lowercased text.

.text-uppercase - Uppercased text.

.text-capitalize - CapiTaliZed text.

.font-weight-normal - Normal weight text.

.font-weight-light - Light text.