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 allborders from an element |
.border-[side]-0
|
Any element |
Use this class to remove specific borders. Available [side]options: l- left, r- right, t- top, b- bottom, x- horizontal, y- vertical.
|
.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-[size]
|
Any element |
Adds the border to an element. Available [size]options: 1- default border width (1px); 2- double width (2px); 3- tripple width (3px)
|
.border-[side]-[size]
|
Any element |
Same as .border-[size], but for specific [side]: left, right, top, bottom
|
.border-[color]
|
Any element |
Changes color of all element's borders. Supports all available color classes, including transparentoption
|
.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
|
.rounded
|
Any element |
Rounds all borders. Default value is defined in $border-radiusvariable
|
.rounded-[side]
|
Any element |
Rounds borders of specific [side]: top, bottom, left, right
|
.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-round
|
Any element |
Adds 100pxborder radius to all borders
|
.rounded-[side]-round
|
Any element |
Adds 100pxborder radius to specific [side]: top, bottom, left, right
|
.rounded-circle
|
Any element |
Adds 50%border radius to all borders
|
| Transformations | ||
.rotate-[value]
|
Any element |
Rotates element clockwise. Options for [value]: 45, 90, 180degrees
|
.rotate-[value]-inverse
|
Any element |
Same as .rotate-[value], but rotation is counterclockwise. Options for [value]are the same as well
|
.spinner
|
Any element | Adds infinite clockwise rotation |
.spinner-inverse
|
Any element | Adds infinite counterclockwise rotation |
| 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 |
.top-[0, auto]
|
All except static |
Resets topproperty for fixed, absolute and relative opsitions
|
.bottom-[0, auto]
|
All except static |
Resets bottomproperty for fixed, absolute and relative opsitions
|
.left-[0, auto]
|
All except static |
Resets leftproperty for fixed, absolute and relative opsitions
|
.right-[0, auto]
|
All except static |
Resets rightproperty for fixed, absolute and relative opsitions
|
| Alignment | ||
.float-[side]
|
Any element |
Element floating. Options for [side]: left, rightsides
|
.float-[breakpoint]-[side]
|
Any element |
Responsive variations of element floating. Options for [breakpoint]: sm, md, lg, xlgscreen sizes
|
.float-none
|
Any element | Removes floating |
.clearfix
|
Any element |
Easily clear floats by adding .clearfixto the element
|
.text-[side]
|
Inline element, text |
Element alignment. Options for [side]: left, center, rightsides
|
.text-[breakpoint]-[side]
|
Inline element, text |
Responsive variations of element alignment. Options for [breakpoint]: sm, md, lg, xlgscreen sizes
|
.align-[value]
|
Inline element, table |
Vertical alignment. Options for [value]: baseline, top, middle, bottom, text-topand 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-[size]
|
Any element |
Sets a minimum width of the element in pixels. Available options for [size]: 200, 250, 300, 350, 400, 450, 500, 550, 600pixels
|
.wmin-[breakpoint]-[size]
|
Any element |
Responsive variations of width utilities. Options for [breakpoint]: sm, md, lg, xlgscreen sizes
|
.w-[25, 50, 75, 100]
|
Any element | Sets a widthof the element in percents |
.w-auto
|
Any element |
Sets the widthof an element to auto(width reset)
|
.w-[breakpoint]-auto
|
Any element |
Responsive variations of width reset utility. Options for [breakpoint]: sm, md, lg, xlgscreen sizes
|
.h-[25, 50, 75, 100]
|
Any element | Sets a heightof the element in percents |
.h-auto
|
Any element |
Sets the heightof an element to auto(height reset)
|
| Visibility | ||
.overflow-[value]
|
Containers |
Content overflow utility. Available options for [value]: hidden- hides content, visible- shows content, auto- makes content scrollable
|
.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 |
.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 |
| Display | ||
.d-block
|
Any element | Displays an element as a block element |
.d-[breakpoint]-block
|
Any element |
Responsive variations of d-blockutility. Options for [breakpoint]: sm, md, lg, xlgscreen sizes
|
.d-inline-block
|
Any element | Displays an element as an inline-level block container |
.d-[breakpoint]-inline-block
|
Any element |
Responsive variations of d-inline-blockutility. Options for [breakpoint]: sm, md, lg, xlgscreen sizes
|
.d-inline
|
Any element | Displays an element as an inline container |
.d-[breakpoint]-inline
|
Any element |
Responsive variations of d-inlineutility. Options for [breakpoint]: sm, md, lg, xlgscreen sizes
|
.d-table
|
Any element | Displays an element as a table element |
.d-[breakpoint]-table
|
Any element |
Responsive variations of d-tableutility. Options for [breakpoint]: sm, md, lg, xlgscreen sizes
|
.d-table-cell
|
Any element | Displays an element as a table cell element |
.d-[breakpoint]-table-cell
|
Any element |
Responsive variations of d-table-cellutility. Options for [breakpoint]: sm, md, lg, xlgscreen sizes
|
.d-flex
|
Any element | Displays an element as a block-level flex container |
.d-[breakpoint]-flex
|
Any element |
Responsive variations of d-flexutility. Options for [breakpoint]: sm, md, lg, xlgscreen sizes
|
.d-inline-flex
|
Any element | Displays an element as an inline-level flex container |
.d-[breakpoint]-inline-flex
|
Any element |
Responsive variations of d-inline-flexutility. Options for [breakpoint]: sm, md, lg, xlgscreen sizes
|
.d-none
|
Any element | Hides the element (has no effect on layout) |
.d-[breakpoint]-none
|
Any element |
Responsive variations of d-noneutility. Options for [breakpoint]: sm, md, lg, xlgscreen sizes
|
| Spacing | ||
.m-[size]
|
Any element |
Adds marginproperty to allsides. 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, xlgscreen sizes
|
.m[l,r,t,b,x,y]-[size]
|
Any element |
Adds marginproperty to the specific side: l- left, r- right, t- top, b- bottom, x- horizontal, y- vertical. Options for the size are the same
|
.m[l,r,t,b]-[breakpoint]-[size]
|
Any element |
Same as for .m-[breakpoint]-[size], except xand yoptions
|
.p-[size]
|
Any element |
Adds paddingproperty to allsides. 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, xlgscreen sizes
|
.p[l,r,t,b,x,y]-[size]
|
Any element |
Adds paddingproperty to the specific side: l- left, r- right, t- top, b- bottom, x- horizontal, y- vertical. Options for the size are the same
|
.p[l,r,t,b]-[breakpoint]-[size]
|
Any element |
Same as for .p-[breakpoint]-[size], except xand yoptions
|
.ml-2
|
Inline elements |
Adds extra leftmargin to the element (mostly for icons and badges)
|
.mr-2
|
Inline elements |
Adds extra rightmargin to the element (mostly for icons and badges)
|
| Text | ||
.text-size-[value]
|
Text |
Sets/overrides font size. Available [value]options: base~ 13px, xs~ 11px; sm- 12px, lg~ 14px
|
.line-height-[value]
|
Text |
Makes it 20px despite the font size. Available [value]options: base, xs; sm, lg
|
| Misc | ||
.cursor-[value]
|
Any element |
Changes cursor style. Available [value]options: move, pointerand defaultstyles
|
.shadow-0
|
Any element | Removes shadow from element |
[data-fouc]
|
jQuery plugins |
This is an attribute that partially helps to fix FOUCissue. It sets opacityto 0and other properties to match styled component size. So that you won't see unstyled content flashing when plugin gets initialized.
|