| Images |
.img-responsive |
Images only |
Applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element |
.img-rounded |
Images only |
Adds rounded 3px border radius to the image |
.img-circle |
Images only |
Makes image fully rounded |
.img-thumbnail |
Images only |
Adds grey frame with white background color |
.img-lg (*-sm, *-xs) |
Images only |
Optional custom sizing. Added specially for media lists |
.img-10 |
Images only |
Image width 10% |
.img-15 |
Images only |
Image width 15% |
.img-20 |
Images only |
Image width 20% |
.img-30 |
Images only |
Image width 30% |
.img-40 |
Images only |
Image width 40% |
.img-50 |
Images only |
Image width 50% |
.img-60 |
Images only |
Image width 60% |
.img-70 |
Images only |
Image width 70% |
.img-80 |
Images only |
Image width 80% |
.img-90 |
Images only |
Image width 90% |
.img-100 |
Images only |
Image width 100% |
| Styling |
.cursor-move |
Any element |
Changes cursor style to move. Mostly used in sortable components |
.cursor-pointer |
Any element |
Changes cursor style to pointer. Useful for user interaction feedback |
.cursor-default |
Any element |
Changes cursor style to default |
.border-* |
Any element |
Adds 1px border to the element, if it doesn't have it already. Available in 4 positions: top, bottom, left, right |
.border-lg |
Any element |
Changes border width to 2px |
.border-*-lg |
Any element |
Does the same as .border-lg, but here you can specify border position: left, right, top and bottom |
.border-xlg |
Any element |
Changes border width to 3px |
.border-*-xlg |
Any element |
Does the same as .border-xlg, but here you can specify border position: left, right, top and bottom |
.no-border-radius |
Any element |
Removes border radius from the element. Supports 4 sidebar separately, to use add .*-top (bottom, left, right) suffix |
.text-highlight |
Text only |
Text highlighted |
.text-size-extralarge |
Text only |
Font size 20px |
.text-size-large |
Text only |
Font size 18px |
.text-size-normal |
Text only |
Font size 14px |
.text-size-small |
Text only |
Font size 12px |
.text-size-mini |
Text only |
Font size 10px |
| Transformations |
.rotate-45 |
Any element |
Rotates element 45 degreees clockwise |
.rotate-45-inverse |
Any element |
Rotates element 45 degreees counterclockwise |
.rotate-90 |
Any element |
Rotates element 90 degreees clockwise |
.rotate-90-inverse |
Any element |
Rotates element 90 degreees counterclockwise |
.rotate-180 |
Any element |
Rotates element 180 degreees clockwise |
.rotate-180-inverse |
Any element |
Rotates element 180 degreees counterclockwise |
.spinner |
Any element |
Adds infinite clockwise rotation |
.spinner-inverse |
Any element |
Adds infinite counterclockwise rotation |
| Positioning |
.center-block |
Any element |
Set an element to display: block and center via margin |
.position-relative |
Any element |
Changes element's positiion to relative |
.position-static |
Any element |
Changes element's positiion to static |
.pull-left |
Any element |
Float an element to the left with a class |
.pull-right |
Any element |
Float an element to the right with a class |
.pull-right-xs
*-sm, *-md, *-lg |
Any element |
Float an element to the right on specified screen sizes only |
.valign-top
*-middle, *-bottom, *-baseline
*-text-top, *-text-bottom
|
Any element |
Helper classes for vertical element alignment |
.clearfix |
Any element |
Easily clear floats by adding .clearfix to the parent element |
| Spacing |
.position-left |
Inline elements |
Add extra right margin to the element |
.position-right |
Inline elements |
Add extra left margin to the element |
.m-5
(*-10, *-15, *-20) |
Any element |
Add 5, 10, 15 and 20 px margin to the element |
.mt-5
(*-10, *-15, *-20) |
Any element |
Add 5, 10, 15 and 20 px top margin to the element |
.mb-5
(*-10, *-15, *-20) |
Any element |
Add 5, 10, 15 and 20 px bottom margin to the element |
.ml-5
(*-10, *-15, *-20) |
Any element |
Add 5, 10, 15 and 20 px left margin to the element |
.mr-5
(*-10, *-15, *-20) |
Any element |
Add 5, 10, 15 and 20 px right margin to the element |
.no-margin |
Any element |
Removes element's margin |
.no-margin-top
(*-bottom, *-left, *-right) |
Any element |
Removes margin of the specified side |
.p-5
(*-10, *-15, *-20) |
Any element |
Add 5, 10, 15 and 20 px padding to the element |
.pt-5
(*-10, *-15, *-20) |
Any element |
Add 5, 10, 15 and 20 px top padding to the element |
.pb-5
(*-10, *-15, *-20) |
Any element |
Add 5, 10, 15 and 20 px bottom padding to the element |
.pl-5
(*-10, *-15, *-20) |
Any element |
Add 5, 10, 15 and 20 px left padding to the element |
.pr-5
(*-10, *-15, *-20) |
Any element |
Add 5, 10, 15 and 20 px right padding to the element |
.no-padding |
Any element |
Removes element's padding |
.no-padding-top
(*-bottom, *-left, *-right) |
Any element |
Removes padding of the specified side |
| Appearance |
.width-100
*-200, *-300 ... *-800 |
Dropdown menus |
Sets a fixed width of the dropdown menu in pixels |
.pre-scrollable |
Containers |
Sets a max-height of 350px and provide a y-axis scrollbar |
.overflow-hidden |
Containers |
Clips content overflow, makes the rest of the content invisible |
.overflow-visible |
Containers |
Shows content overflow, makes the rest of the content visible |
.overflow-auto |
Containers |
Clips content overflow, makes the rest of the content scrollable |
.display-block |
Any element |
Displays an element as a block element |
.display-inline-block |
Any element |
Displays an element as an inline-level block container |
