#### Limitless - Helpers

##### Content helpers

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.

##### Enable flex behaviors

Apply `display` utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties. The `.d-flex` class makes the flex container a block-level element. The `.d-inline-flex` class makes the flex container an atomic inline-level element. Please note: an anonymous flex item that contains only white space is not rendered, as if it were designated `display: none`. Also `clear` and `vertical-align` properties have no effect on flex items, and `float` causes the `display` property of the element to compute to `block`.

Flexbox container

I'm a flexbox container!

Inline flexbox container

I'm an inline flexbox container!

Display classes
`.d-flex` | Displays an element as a block-level flex container
`.d-[breakpoint]-flex` | Responsive variations of `.d-flex` class. Options for [breakpoint]: `sm`, `md`, `lg`, `lg` screen sizes
`.d-inline-flex` | Displays an element as an inline-level flex container
`.d-[breakpoint]-inline-flex` | Responsive variations of `.d-inline-flex` class. Options for [breakpoint]: `sm`, `md`, `lg`, `lg` screen sizes

##### Flex direction

Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is `row`. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts). Use `.flex-row` to set a horizontal direction (the browser default), or `.flex-row-reverse` to start the horizontal direction from the opposite side. Use `.flex-column` to set a vertical direction, or `.flex-column-reverse` to start the vertical direction from the opposite side.

Row direction

Flex item 1
Flex item 2
Flex item 3
Flex item 4

Reverse row direction

Flex item 1
Flex item 2
Flex item 3
Flex item 4

Column direction

Flex item 1
Flex item 2
Flex item 3
Flex item 4

Reverse column direction

Flex item 1
Flex item 2
Flex item 3
Flex item 4

Flex row classes
`.flex-row` | Default value. The flexible items are displayed horizontally, as a row
`.flex-[breakpoint]-row` | Responsive variations of `.flex-row` class. Options for [breakpoint]: `sm`, `md`, `lg`, `lg` screen sizes
`.flex-row-reverse` | Same as row, but in reverse order
`.flex-[breakpoint]-row-reverse` | Responsive variations of `.flex-row-reverse` class. Options for [breakpoint]: `sm`, `md`, `lg`, `lg` screen sizes
Flex column classes
`.flex-column` | The flexible items are displayed vertically, as a column
`.flex-[breakpoint]-column` | Responsive variations of `.flex-column` class. Options for [breakpoint]: `sm`, `md`, `lg`, `lg` screen sizes
`.flex-column-reverse` | Same as column, but in reverse order
`.flex-[breakpoint]-column-reverse` | Responsive variations of `.flex-column-reverse` class. Options for [breakpoint]: `sm`, `md`, `lg`, `lg` screen sizes

##### Justify content

Use `justify-content` utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `between`, or `around` values. The alignment is done after the lengths and auto margins are applied, meaning that, if in a Flexbox layout there is at least one flexible element, with `flex-grow` different from `0`, it will have no effect as there won't be any available space.

Beginning (start) of the container

Flex item
Flex item
Flex item

Center of the container

Flex item
Flex item
Flex item

End of the container

Flex item
Flex item
Flex item

With space between the lines

Flex item
Flex item
Flex item

With space before, between, and after the lines

Flex item
Flex item
Flex item

Justify content classes
`.justify-content-[value]` | Aligns the flex container's items when the items don't use all available space on the main-axis (horizontally). Available options for [value]: `start` (browser default), `end`, `center`, `between`, or `around`.
`.justify-content-[breakpoint]-[value]` | Responsive variations of `.justify-content-[value]` classes. Options for [breakpoint]: `sm`, `md`, `lg`, `xl` screen sizes

##### Align items

Use `align-items` utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from `start`, `end`, `center`, `baseline`, or `stretch` (browser default). Basically it works like `justify-content`, but in the perpendicular direction. Tip: use the `align-self` property of each item to override the `align-items` property.

Beginning (start) of the container

Flex item
Flex item
Flex item

Center of the container

Flex item
Flex item
Flex item

End of the container

Flex item
Flex item
Flex item

WBaseline of the container

Flex item
Flex item
Flex item

Fit the container

Flex item
Flex item
Flex item

Align items classes
`.align-items-[value]` | Alignment of items inside flex container. Options for [value]: `start`, `end`, `center`, `baseline`, or `stretch` (browser default).
`.align-items-[breakpoint]-[value]` | Responsive variations of `.align-items-[value]` classes. Options for [breakpoint]: `sm`, `md`, `lg`, `xl` screen sizes

##### Align self

Use `align-self` utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from the same options as align-items: `start`, `end`, `center`, `baseline`, or `stretch` (browser default). The property doesn't apply to block-level boxes, or to table cells.

Beginning (start) of the container

Flex item
Aligned flex item
Flex item

Center of the container

Flex item
Aligned flex item
Flex item

End of the container

Flex item
Aligned flex item
Flex item

Baseline of the container

Flex item
Aligned flex item
Flex item

Fit the container

Flex item
Aligned flex item
Flex item

Align self classes
`.align-self-[value]` | Alignment of the selected item inside flex container. Options for [value]: `start`, `end`, `center`, `baseline`, or `stretch` (browser default).
`.align-self-[breakpoint]-[value]` | Responsive variations of `.align-self-[value]` classes. Options for [breakpoint]: `sm`, `md`, `lg`, `xl` screen sizes.

##### Auto margins

Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (`.mr-auto`), and pushing two items to the left (`.ml-auto`). Unfortunately, IE10 and IE11 do not properly support auto margins on flex items whose parent has a non-default `justify-content` value.

Right auto margin

Flex item 1
Flex item 2
Flex item 3

Left auto margin

Flex item 1
Flex item 2
Flex item 3

Bottom auto margin

Flex item 1
Flex item 2
Flex item 3

Top auto margin

Flex item 1
Flex item 2
Flex item 3

Auto margin classes
`.m[t,b,l,r]-auto` | Pushes flex items to specified side, where "l" is left, "r" is right, "t" is top and "b" is bottom.
`.m[t,b,l,r]-[breakpoint]-auto` | Responsive variations of `.m[t,b,l,r]-auto` classes. Options for [breakpoint]: `sm`, `md`, `lg`, `xl` screen sizes

##### Flex wrap

The `flex-wrap` classes specify whether flex items are forced into a single line or can be wrapped onto multiple lines. If wrapping is allowed, this property also enables you to control the direction in which lines are stacked. Note: if the elements are not flexible items, the `flex-wrap` property has no effect. Supports 2 directions: default and reversed.

No wrap

Flex item
Flex item
Flex item
Flex item

Wrap - default direction

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Wrap - reversed direction

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Flex wrap classes
`.flex-nowrap` | The flex items are laid out in a single line - may cause the flex container to overflow
`.flex-[breakpoint]-nowrap` | Responsive variations of `.flex-nowrap` class. Options for [breakpoint]: `sm`, `md`, `lg`, `xl` screen sizes
`.flex-wrap` | The flex items break into multiple lines
`.flex-[breakpoint]-wrap` | Responsive variations of `.flex-wrap` class. Options for [breakpoint]: `sm`, `md`, `lg`, `xl` screen sizes
`.flex-wrap-reverse` | Behaves the same as `.flex-wrap`, but in reverse order
`.flex-[breakpoint]-wrap-reverse` | Responsive variations of `.flex-wrap-reverse` class. Options for [breakpoint]: `sm`, `md`, `lg`, `xl` screen sizes

##### Flex order

Change the visual order of specific flex items with a handful of `order` utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As order takes any integer value (e.g., 5), add custom CSS for any additional values needed. Elements with the same order value are laid out in the order in which they appear in the source code. Note: If the element is not a flexible item, the order property has no effect.

Default order

Flex item 1
Flex item 2
Flex item 3

Custom order

Flex item 1
Flex item 2
Flex item 3

Default order

Flex item 1
Flex item 2
Flex item 3

Custom order

Flex item 1
Flex item 2
Flex item 3

Flex order classes
`.order-[value]` | Specify the order used to lay out flex items in their flex container. Values for [value]: `1`, `2`, ... `12`.
`.order-[breakpoint]-[value]` | Responsive variations of `.order-[value]` classes. Options for [breakpoint]: `sm`, `md`, `lg`, `xl` screen sizes

##### Align content

Use `align-content` utilities on flexbox containers to align flex items together on the cross axis. Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `stretch`. To demonstrate these utilities, we’ve enforced `flex-wrap: wrap` and increased the number of flex items. Note: this property has no effect on single rows of flex items.

Start of the flex container

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

End of the flex container

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Center of the flex container

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Evenly in the flex container

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Evenly with half-size spaces on either end

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Stretch to take up the remaining space

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Align content classes
`.align-content-[value]` | Similar to align-items, but instead of aligning flex items, it aligns flex lines. Options for [value] are similar to `.justify-content-[value]` classes
`.align-content-[breakpoint]-[value]` | Responsive variations of `.align-content-[value]` classes. Options for [breakpoint]: `sm`, `md`, `lg`, `xl` screen sizes