Utility classes
Helpers classes to help build components without adding extra css. Default values can be changed via CSS or LESS @variables.
Margin
.m0 |
Clear all margins |
.ml0 |
Clear left margin |
.mr0 |
Clear right margin |
.mt0 |
Clear top margin |
.mb0 |
Clear bottom margin |
.m |
All margins to 16px |
.ml |
Margin left to 16px |
.mr |
Margin right to 16px |
.mt |
Margin top to 16px |
.mb |
Margin bottom to 16px |
.m-sm |
Small margins of 8px |
.ml-sm |
Small margin left of 8px |
.mr-sm |
Small margin right of 8px |
.mt-sm |
Small margin top of 8px |
.mb-sm |
Small margin bottom of 8px |
.m-lg |
Large margins of 24px |
.ml-lg |
Large margin left of 24px |
.mr-lg |
Large margin right of 24px |
.mt-lg |
Large margin top of 24px |
.mb-lg |
Large margin bottom of 24px |
.m-xl |
Extra large margins of 32px |
.ml-xl |
Extra large margin left of 32px |
.mr-xl |
Extra large margin right of 32px |
.mt-xl |
Extra large margin top of 32px |
.mb-xl |
Extra large margin bottom of 32px |
.mv |
Vertical margins of 16px |
.mh |
Horizontal margins of 16px |
.mv-lg |
Large vertical margins of 24px |
.mh-lg |
Large horizontal margins of 24px |
.mv-sm |
Small vertical margins of 8px |
.mh-sm |
Small horizontal margins of 8px |
Padding
.p0 |
Clear all paddings |
.pl0 |
Clear left padding |
.pr0 |
Clear right padding |
.pt0 |
Clear top padding |
.pb0 |
Clear bottom padding |
.p |
All paddings to 16px |
.pl |
padding left to 16px |
.pr |
padding right to 16px |
.pt |
padding top to 16px |
.pb |
padding bottom to 16px |
.p-sm |
Small paddings of 8px |
.pl-sm |
Small padding left of 8px |
.pr-sm |
Small padding right of 8px |
.pt-sm |
Small padding top of 8px |
.pb-sm |
Small padding bottom of 8px |
.p-lg |
Large paddings of 24px |
.pl-lg |
Large padding left of 24px |
.pr-lg |
Large padding right of 24px |
.pt-lg |
Large padding top of 24px |
.pb-lg |
Large padding bottom of 24px |
.p-xl |
Extra large paddings of 32px |
.pl-xl |
Extra large padding left of 32px |
.pr-xl |
Extra large padding right of 32px |
.pt-xl |
Extra large padding top of 32px |
.pb-xl |
Extra large padding bottom of 32px |
.pv |
Vertical paddings of 16px |
.ph |
Horizontal paddings of 16px |
.pv-lg |
Large vertical paddings of 24px |
.ph-lg |
Large horizontal paddings of 24px |
.pv-sm |
Small vertical paddings of 8px |
.ph-sm |
Small horizontal paddings of 8px |
Sizes
.fh / .fw |
Height or Width at 100% |
.fh-sm / .fw-sm |
Height or Width at 100% above 768px |
.fh-md / .fw-md |
Height or Width at 100% above 992px |
.fh-lg / .fw-lg |
Height or Width at 100% above 1200px |
.thumb8 |
Set width and height of 8px |
.thumb16 |
Set width and height of 16px |
.thumb24 |
Set width and height of 24px |
.thumb32 |
Set width and height of 32px |
.thumb40 |
Set width and height of 40px |
.thumb48 |
Set width and height of 48px |
.thumb64 |
Set width and height of 64px |
.thumb80 |
Set width and height of 80px |
.thumb96 |
Set width and height of 96px |
.thumb128 |
Circle with radius 128px |
.initial8 |
Circle with radius 8px |
.initial16 |
Circle with radius 16px |
.initial24 |
Circle with radius 24px |
.initial32 |
Circle with radius 32px |
.initial40 |
Circle with radius 40px |
.initial48 |
Circle with radius 48px |
.initial64 |
Circle with radius 64px |
.initial80 |
Circle with radius 80px |
.initial96 |
Circle with radius 96px |
.initial128 |
Circle with radius 128px |
.wd-xxs |
Set width of 60px |
.wd-xs |
Set width of 90px |
.wd-sm |
Set width of 150px |
.wd-sd |
Set width of 200px |
.wd-md |
Set width of 240px |
.wd-lg |
Set width of 280px |
.wd-xl |
Set width of 320px |
.wd-xxl |
Set width of 360px |
.wd-wide |
Set width of 100% |
.wd-auto |
Set width auto |
.wd-zero |
Set width of 0px |
Miscellaneous
.table-fixed |
Make table layout fixed |
.oh |
Overflow hidden (clear floats) |
.oa |
Overflow auto (adds scrollbars) |
.shadow-clear |
Remove box shadow |
.radius-clear |
Remove border radius |
.link-unstyled |
Remove underline and outline styles |
.reader-block |
Makes paragraphs more readable |
.image-list |
A list of images links overlap to the previous |
textarea.no-resize |
Remove resize option from Texareas |
.inline |
Forces display: inline |
.block |
Forces display: block |
Text & Font icons
.text-white |
Make text color white |
.text-alpha |
Make text color white 50% opacity |
.text-alpha-inverse |
Make text color dark 50% opacity |
.text-gray-darker |
Make text color @gray-darker |
.text-gray-dark |
Make text color @gray-dark |
.text-gray |
Make text color @gray |
.text-gray-light |
Make text color @gray-light |
.text-gray-lighter |
Make text color @gray-lighter |
.text-inherit |
Make text color inherit |
.text-soft |
Make text color black 26% opacity |
.text-light |
Make text color white 74% opacity |
.text-sm |
Make text 85% smaller |
.text-md |
Make text 90% bigger |
.text-lg |
Make text 3x bigger |
.text-nowrap |
Make text no wrap |
.text-thin |
Make text font weight 100 |
.text-bold |
Make text font weight bold |
.text-normal |
Make text font weight normal |
.icon-18 |
Make icon at font size 18px |
.icon-24 |
Make icon at font size 24px |
.icon-36 |
Make icon at font size 36px |
.icon-48 |
Make icon at font size 48px |
.icon-2x |
Make icon 2x bigger |
.icon-3x |
Make icon 3x bigger |
.icon-4x |
Make icon 4x bigger |
.icon-5x |
Make icon 5x bigger |
.icon-lg |
Make icon 33% bigger |
.icon-fw |
Make icon fixed width |
.icon-dark |
Make icon dark for light backgrounds |
.icon-light |
Make icon light for dark backgrounds |
Backgrounds
.bg-white |
Make background color white |
.bg-primary |
Make background color @primary |
.bg-success |
Make background color @success |
.bg-info |
Make background color @info |
.bg-warning |
Make background color @warning |
.bg-danger |
Make background color @danger |
.bg-gray-darker |
Make background color @gray-darker |
.bg-gray-dark |
Make background color @gray-dark |
.bg-gray |
Make background color @gray |
.bg-gray-light |
Make background color @gray-light |
.bg-gray-lighter |
Make background color @gray-lighter |
.bg-transparent |
Make background color transparent |
.bg-fade |
Make background dark faded from bottom |
.bg-cover |
Make background image cover |
.bg-full |
Make background image cover and no-repeat |
.bg-center |
Make background image cover and centered |