Utility classes
Helpers classes to help build components without adding extra css. Default values can be changed via CSS or LESS @variables.
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 |
More ColorsBackgrounds
.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 |