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
.b-t-1
.b-b-2
.b-l-3
.b-r-1
.b-x-2
.b-y-3
.b-a-1
.page-block
.page-wide-block
.panel-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.
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.valign-top
- Top-aligned.valign-middle
- Middle-aligned.valign-bottom
- Bottom-aligned.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.
.font-weight-semibold
- Semibold text.
.font-weight-bold
- Bold text.
.font-italic
- Italicized text.
.line-height-1
- Reset line height to 1.
.text-underlined
- Underlined text.
.font-size-11
- Font size is 11px
.font-size-12
- Font size is 12px
.font-size-13
- Font size is 13px
.font-size-14
- Font size is 14px
.font-size-15
- Font size is 15px
.font-size-16
- Font size is 16px
.font-size-17
- Font size is 17px
.font-size-18
- Font size is 18px
.font-size-20
- Font size is 20px
.font-size-24
- Font size is 24px
.font-size-28
- Font size is 28px
.font-size-34
- Font size is 34px
.font-size-40
- Font size is 40px
.font-size-46
- Font size is 46px
.font-size-52
- Font size is 52px
border-radius
of the element.
.border-rounded
.border-round
.border-radius-0
.text-white
- White text
.text-default
- Default text
.text-muted
- Muted text
.text-light
- Light text
.text-primary
- Primary text
.text-success
- Success text
.text-danger
- Danger text
.text-warning
- Warning text
.text-info
- Info text
.bg-white
- White background
.bg-white.darken
- White darken background
.bg-white.darker
- White darker background
.bg-black
- Black background
.bg-black.darken
- Black darken background
.bg-black.darker
- Black darker background
.bg-default
- Default background
.bg-default.darken
- Default darken background
.bg-default.darker
- Default darker background
.bg-primary
- Primary background
.bg-primary.darken
- Primary darken background
.bg-primary.darker
- Primary darker background
.bg-success
- Success background
.bg-success.darken
- Success darken background
.bg-success.darker
- Success darker background
.bg-danger
- Danger background
.bg-danger.darken
- Danger darken background
.bg-danger.darker
- Danger darker background
.border-default
- Default border color.border-panel
- Panel border color.border-primary
- Primary border color.border-success
- Success border color.border-danger
- Danger border color.border-warning
- Warning border color.border-info
- Info border color