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. Flex utilities are moved to a separate page and include various examples.
| Borders | ||
.border-0 |
Any element | Use this class to remove all borders from an element |
.border-[side]-0.border-[side]-[breakpoint]-0 |
Any element | Use this class to remove specific borders. Available [side] options: start, end, top, bottom. |
.border-width-0 |
Any element | Sets border width to 0. Useful for inheriting other border properties |
.border |
Any element | Adds a border to an element with pre-defined BS's default width and color properties |
.border-width-[size] |
Any element | Adds the border to an element. Available [size] options: 0, 1, 2, 3, 4, 5 |
.border-width-[side]-[size] |
Any element | Same as .border-[size], but for specific [side]: start, end, top, bottom |
.border-[color] |
Any element | Changes color of all element's borders. Supports all available color classes, including transparent option |
.border-[side]-[color] |
Any element | If you need to change color of some specific border, use this class combination. Options for [side]: left, right, top, bottom |
.border-style-[dashed|dotted] |
Any element | Changes border style from solid to dashed or dotted. Dashed borders also support top/bottom/left/right options |
| Border radius | ||
.rounded |
Any element | Rounds all borders. Default value is defined in $border-radius variable |
.rounded-[side] |
Any element | Rounds borders of specific [side]: top, bottom, left, right |
.rounded-[side]-[start|end] |
Any element | Rounds borders of 1 corner of specific vertical [side]: top, bottom |
.rounded-0 |
Any element | Removes rounded corners from all borders |
.rounded-[side]-0 |
Any element | Removes rounded corners from specific [side]: top, bottom, left, right |
.rounded-pill |
Any element | Adds 100rem border radius to all borders |
.rounded-[side]-pill |
Any element | Adds 100rem border radius to specific [side]: top, bottom, left, right |
.rounded-circle |
Any element | Adds 50% border radius to all borders |
| Transformations | ||
.rotate-cw |
Any element | Rotates element clockwise. Options for [value]: 45, 90, 180 degrees |
.rotate-ccw |
Any element | Rotates element counterclockwise. Options for [value]: 45, 90, 180 degrees |
.spinner |
Any element | Adds infinite clockwise rotation |
.spinner-reverse |
Any element | Adds infinite counterclockwise rotation |
.translate-middle.translate-middle-[x|y|start|top] |
Any element | Centers element vertically and/or horizontally |
| Positioning | ||
.position-[value] |
Any element | Changes element's positiion. Available options for [value]: relative, static, absolute, fixed, sticky |
.fixed-[top|bottom] |
Any element | Position an element at the top (bottom) of the viewport, from edge to edge |
.sticky-[top|bottom] |
Any element | Position an element at the top (bottom) of the viewport relatively to its parent |
.top-[0|50|100|auto] |
All except static | Resets top property for fixed, absolute and relative opsitions |
.bottom-[0|50|100|auto] |
All except static | Resets bottom property for fixed, absolute and relative opsitions |
.start-[0|50|100|auto] |
All except static | Resets left property for fixed, absolute and relative opsitions |
.end-[0|50|100|auto] |
All except static | Resets right property for fixed, absolute and relative opsitions |
| Alignment | ||
.float-[side] |
Any element | Element floating. Options for [side]: start, end sides |
.float-[breakpoint]-[side] |
Any element | Responsive variations of element floating. Options for [breakpoint]: sm, md, lg, xl, xxl screen sizes |
.float-none |
Any element | Removes floating |
.clearfix |
Any element | Easily clear floats by adding .clearfix to the element |
.text-[side] |
Inline element, text | Element alignment. Options for [side]: left, center, right sides |
.text-[breakpoint]-[side] |
Inline element, text | Responsive variations of element alignment. Options for [breakpoint]: sm, md, lg, xl screen sizes |
.align-[value] |
Inline element, table | Vertical alignment. Options for [value]: baseline, top, middle, bottom, text-top and text-bottom |
| Images | ||
.img-fluid |
Images only | Applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element |
.img-thumbnail |
Images only | Adds grey frame with white background color |
| Sizing | ||
.wmin-[value] |
Any element | Sets a minimum width of the element in pixels. Available options for [value]: 200, 250, 300, 350, 400, 450, 500, 550, 600 pixels |
.wmin-[breakpoint]-[value] |
Any element | Responsive variations of width utilities. Options for [breakpoint]: sm, md, lg, xl screen sizes |
.mw-[value] |
Any element | Sets a maximum width of the element in pixels. Available option for [value] is 100% |
.vw-[value] |
Any element | Sets viewport container width in vw. Available option for [value] is 100 |
.min-vw-[value] |
Any element | Sets viewport container min-width in vw. Available option for [value] is 100 |
.w-[responsive value] |
Any element | Sets a responsive width of the element in percents. Values are: [25, 50, 75, 100, auto]. Supports breakpoints |
.w-[fixed values] |
Any element | Sets a responsive width of the element in pixels. Values are: 16px, 24px, 32px, 40px, 48px, 56px, 64px, 72px, 80px |
.h-[responsive value] |
Any element | Sets a responsive height of the element in percents. Values are: [25, 50, 75, 100, auto]. Supports breakpoints |
.h-[fixed values] |
Any element | Sets a responsive height of the element in pixels. Values are: 16px, 24px, 32px, 40px, 48px, 56px, 64px, 72px, 80px |
.vh-[value] |
Any element | Sets viewport container height in vh. Available option for [value] is 100 |
.min-vh-[value] |
Any element | Sets viewport container min-height in vh. Available option for [value] is 100 |
| Visibility | ||
.overflow-[value] |
Containers | Content overflow utility. Available options for [value]: hidden - hides content, visible - shows content, auto - makes content scrollable, scroll - always displays scrollbar |
.visible |
Containers | Makes the element invisible for the user, but visible for screen readers |
.invisible |
Containers | 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 |
| Display | ||
.d-[value] |
Any element | Set of classes for display property. Values are: inline, inline-block, block, grid, table, table-row, table-cell, flex, inline-flex, none |
.d-[breakpoint]-[value] |
Any element | Responsive variations of d-[value] utility. Options for [breakpoint]: sm, md, lg, xl, xxl screen sizes |
| Spacing | ||
.m-[size] |
Any element | Adds margin property to all sides. Available [size] are: 0, 1 ~ 5px, 2 ~ 10px, 3 ~ 20px, 4 ~ 30px, 5 ~ 40px, auto |
.m-[breakpoint]-[size] |
Any element | Responsive variations of .m-[size] utility. Options for [breakpoint]: sm, md, lg, xl screen sizes |
.m[s,e,t,b,x,y]-[size] |
Any element | Adds margin property to the specific side: s - left (start), e - right (end), t - top, b - bottom, x - horizontal, y - vertical. Options for the size are the same |
.m[s,e,t,b]-[breakpoint]-[size] |
Any element | Same as for .m-[breakpoint]-[size], except x and y options |
.p-[size] |
Any element | Adds padding property to all sides. Available [size] are: 0, 1 ~ 5px, 2 ~ 10px, 3 ~ 20px, 4 ~ 30px, 5 ~ 40px, auto |
.p-[breakpoint]-[size] |
Any element | Responsive variations of .p-[size] utility. Options for [breakpoint]: sm, md, lg, xl, xxl screen sizes |
.p[s,e,t,b,x,y]-[size] |
Any element | Adds padding property to the specific side: s - left (start), e - right (end), t - top, b - bottom, x - horizontal, y - vertical. Options for the size are the same |
.p[s,e,t,b]-[breakpoint]-[size] |
Any element | Same as for .p-[breakpoint]-[size], except x and y options |
| Text | ||
.font-[value] |
Text | Sets/overrides font family. Available [value] options: monospace, serif |
.fs-[value] |
Text | Sets/overrides font size. Available [value] options: base ~ 14px, xs ~ 12px; sm - 13px, lg ~ 15px |
.fw-[value] |
Text | Sets/overrides font weight. Available [value] options: light, lighter, normal, medium, semibold, bold, bolder |
.fst-[value] |
Text | Sets/overrides font style. Available [value] options: italic, normal |
.lh-[value] |
Text | Line height. Available [value] options: base, xs; sm, lg and 1 |
.text-decoration-[value] |
Text | Text decoration. Available [value] options: none, underline, line-through |
.text-[value] |
Text | Various text styles. Available [value] options: lowercase, uppercase, capitalize, wrap, nowrap, break |
| Color | ||
.text-[color] |
Text | Sets text color. Available [value] options: muted, white, dark, black, primary, secondary, danger, success, warning, info, pink, purple, indigo, teal, yellow |
.link-[color] |
Text | Sets text link color. Available [value] options: muted, white, dark, black, primary, secondary, danger, success, warning, info, pink, purple, indigo, teal, yellow |
.bg-[color] |
Block and inline elements | Sets background color. Available [value] options: muted, white, dark, black, primary, secondary, danger, success, warning, info, pink, purple, indigo, teal, yellow |
| Opacity | ||
.opacity-[value] |
Any element | Changes opacity of an element. Available [value] options: 0, 25, 50, 75, 100 |
.border-opacity-[value] |
Any element | Changes border opacity. Supported values are: 0, 10, 15, 20, 25, 50, 75, 100 |
.text-opacity-[value] |
Any element | Changes text opacity. Supported values are: 0, 10, 15, 20, 25, 50, 75, 100 |
.bg-opacity-[value] |
Any element | Changes background color opacity. Supported values are: 0, 10, 15, 20, 25, 50, 75, 100 |
| Shadow | ||
.shadow |
Any element | Adds box shadowto an element |
.shadow-[value] |
Any element | Adds or removes box shadow. Supported values are: none, sm, lg |
| Misc | ||
.user-select-[value] |
Any element | Enable or disable selection. Available [value] options: all, auto, none |
.pe-[value] |
Any element | Changes pointer events. Available [value] options: none, auto |
.cursor-[value] |
Any element | Changes cursor style. Available [value] options: move, pointer and default styles |
.filter-none |
Any element | Removes all CSS filters |
.transition-none |
Any element | Removes all CSS transitions |
zindex |
jQuery plugins | Resets z-index of an element. Values are: 1, auto |
