#### Content - Helper Classes

Statistics Invoices Schedule

##### 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` | Any element | Use this class to remove specific borders. Available [side] options: `left`, `right`, `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-[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 `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`
`.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-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 `100px` border radius to all borders
`.rounded-[side]-round` | Any element | Adds `100px` border 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`, `180` degrees
`.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-reverse` | 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 `top` property for fixed, absolute and relative opsitions
`.bottom-[0, auto]` | All except static | Resets `bottom` property for fixed, absolute and relative opsitions
`.left-[0, auto]` | All except static | Resets `left` property for fixed, absolute and relative opsitions
`.right-[0, auto]` | All except static | Resets `right` property for fixed, absolute and relative opsitions
Alignment
`.float-[side]` | Any element | Element floating. Options for [side]: `left`, `right` sides
`.float-[breakpoint]-[side]` | Any element | Responsive variations of element floating. Options for [breakpoint]: `sm`, `md`, `lg`, `xlg` 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`, `xlg` 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-[size]` | Any element | Sets a minimum width of the element in pixels. Available options for [size]: `200`, `250`, `300`, `350`, `400`, `450`, `500`, `550`, `600` pixels
`.wmin-[breakpoint]-[size]` | Any element | Responsive variations of width utilities. Options for [breakpoint]: `sm`, `md`, `lg`, `xlg` screen sizes
`.w-[25, 50, 75, 100]` | Any element | Sets a width of the element in percents
`.w-auto` | Any element | Sets the width of an element to `auto` (width reset)
`.w-[breakpoint]-auto` | Any element | Responsive variations of width reset utility. Options for [breakpoint]: `sm`, `md`, `lg`, `xlg` screen sizes
`.h-[25, 50, 75, 100]` | Any element | Sets a height of the element in percents
`.h-auto` | Any element | Sets the height of 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-block` utility. Options for [breakpoint]: `sm`, `md`, `lg`, `xlg` screen 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-block` utility. Options for [breakpoint]: `sm`, `md`, `lg`, `xlg` screen sizes
`.d-inline` | Any element | Displays an element as an inline container
`.d-[breakpoint]-inline` | Any element | Responsive variations of `d-inline` utility. Options for [breakpoint]: `sm`, `md`, `lg`, `xlg` screen sizes
`.d-table` | Any element | Displays an element as a table element
`.d-[breakpoint]-table` | Any element | Responsive variations of `d-table` utility. Options for [breakpoint]: `sm`, `md`, `lg`, `xlg` screen 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-cell` utility. Options for [breakpoint]: `sm`, `md`, `lg`, `xlg` screen sizes
`.d-flex` | Any element | Displays an element as a block-level flex container
`.d-[breakpoint]-flex` | Any element | Responsive variations of `d-flex` utility. Options for [breakpoint]: `sm`, `md`, `lg`, `xlg` screen 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-flex` utility. Options for [breakpoint]: `sm`, `md`, `lg`, `xlg` screen sizes
`.d-none` | Any element | Hides the element (has no effect on layout)
`.d-[breakpoint]-none` | Any element | Responsive variations of `d-none` utility. Options for [breakpoint]: `sm`, `md`, `lg`, `xlg` 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`, `xlg` screen sizes
`.m[l,r,t,b,x,y]-[size]` | Any element | Adds `margin` property 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 `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`, `xlg` screen sizes
`.p[l,r,t,b,x,y]-[size]` | Any element | Adds `padding` property 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 `x` and `y` options
`.ml-2` | Inline elements | Adds extra `left` margin to the element (mostly for icons and badges)
`.mr-2` | Inline elements | Adds extra `right` margin to the element (mostly for icons and badges)
Text
`.font-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`, `pointer` and `default` styles
`.shadow-0` | Any element | Removes shadow from element
`[data-fouc]` | jQuery plugins | This is an attribute that partially helps to fix FOUC issue. It sets `opacity` to `0` and other properties to match styled component size. So that you won't see unstyled content flashing when plugin gets initialized.