Appearance - Helper Classes
Besides basic typography classes, helper classes are an extra set of additional predefined classes, that can be applied to different content or layout elements and components. Helper classes are custom additions mostly, written especially for current layout, except common BS helpers. Below is a summarized table with all available classes, descriptions and content type.
| 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 | Highlights inline element, background class is required |
.heading-divided |
Headings only | Adds bottom border to the heading with proper spacing |
| 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 |
| 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 |
| 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 |
.show |
Block element | Force an element to be shown. Available for block level toggling only |
.hidden |
Block element | Force an element to be hidden. Available for block level toggling only |
.invisible |
Any element | Can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document |
.text-hide |
Text only | Helps replace an element's text content with a background image |
.sr-only |
Any element | Hides an element to all devices except screen readers |
| Spacing | ||
.content-group*-lg, *-sm |
Any element | Wrap any component in .content-group to add 10px, 20px or 30px bottom margin |
.position-left |
Inline elements | Add extra right margin to the element |
.position-right |
Inline elements | Add extra left margin to the element |
.no-edge-top(*-bottom, *-left, *-right) |
Any element | Removes the top edge of the elements, works with absolute, fixed and relative positioned elements |
.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 |
.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 |