Helper Classes

Spacing

Assign margin or padding to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. All classes are multiples on the global default value, 1rem.

The classes are named using the format: {property}-{sides}-{size}

m - for classes that set margin
p - for classes that set padding

This table contain class to add element's top, bottom, left, right & all side margin.

Classes	Description
`.mt-{size}`	To set margin top use `.mt-{size}` class, where `{size}` is value between 0-3.
`.mb-{size}`	To set margin bottom use `.mb-{size}` class, where `{size}` is value between 0-3.
`.ml-{size}`	To set margin left use `.ml-{size}` class, where `{size}` is value between 0-3.
`.mr-{size}`	To set margin right use `.mr-{size}` class, where `{size}` is value between 0-3.
`.mx-{size}`	To set both margin left & right use `.mx-{size}` class, where `{size}` is value between 0-3.
`.my-{size}`	To set both margin top & bottom use `.my-{size}` class, where `{size}` is value between 0-3.
`.ma-{size}`	To set margin 4 sides of the element use `.ma-{size}` class, where `{size}` is value between 0-3.

This table contain class to add element's top, bottom, left, right & all side padding.

Classes	Description
`.pt-{size}`	To set padding top use `.pt-{size}` class, where `{size}` is value between 0-3.
`.pb-{size}`	To set padding bottom use `.pb-{size}` class, where `{size}` is value between 0-3.
`.pl-{size}`	To set padding left use `.pl-{size}` class, where `{size}` is value between 0-3.
`.pr-{size}`	To set padding right use `.pr-{size}` class, where `{size}` is value between 0-3.
`.px-{size}`	To set both padding left & right use `.px-{size}` class, where `{size}` is value between 0-3.
`.py-{size}`	To set both padding top & bottom use `.py-{size}` class, where `{size}` is value between 0-3.
`.pa-{size}`	To set padding 4 sides of the element use `.pa-{size}` class, where `{size}` is value between 0-3.

Where size is one of:

0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer-x or $spacer-y
2 - (by default) for classes that set the margin or padding to $spacer-x * 1.5 or $spacer-y * 1.5
3 - (by default) for classes that set the margin or padding to $spacer-x * 3 or $spacer-y * 3

Content helpers

Display

Content helpers classes provides display, position, z-index, edges, vertical alignment, cursor, overflow & list options.

Add one of these classes to change the elemets' display properties.

Classes	Description
`.display-inline`	Forces the element to behave like an inline element.
`.display-inline-block`	Forces the element to behave like an inline-block element.
`.display-block`	Forces the element to behave like an block element.
`.display-hidden`	Forces the element to hide on all viewports.

Position

Add one of these classes to set the elemets' position properties.

Classes	Description
`.position-fixed`	Changes element's position to fixed.
`.position-relative`	Changes element's position to relative.
`.position-absolute`	Changes element's position to absolute.
`.position-static`	Changes element's position to static.

Vertical alignment

Add one of these classes to change the elemets' vertical alignment properties.

Classes	Description
`.valign-top`	Changes element's vertical alignment to top.
`.valign-middle`	Changes element's vertical alignment to middle.
`.valign-bottom`	Changes element's vertical alignment to bottom.
`.valign-baseline`	Changes element's vertical alignment to baseline.
`.valign-text-top`	Top of the element is aligned with the top of the parent element's font.
`.valign-text-bottom`	The bottom of the element is aligned with the bottom of the parent element's font.

Edges

Add one of these to removes the slected edge of the elements, works with absolute, fixed and relative positioned elements.

Classes	Description
`.no-edge-top`	Removes the top edge of the element.
`.no-edge-bottom`	Removes the bottom edge of the element.
`.no-edge-left`	Removes the left edge of the element.
`.no-edge-right`	Removes the right edge of the element.

Overflow

Add one of these to class to change overflow of element.

Classes	Description
`.overflow-visible`	Default. The overflow is not clipped. It renders outside the element's box.
`.overflow-hidden`	The overflow is clipped, and the rest of the content will be invisible.
`.overflow-auto`	If overflow is clipped, a scrollbar should be added to see the rest of the content.
`.overflow-scroll`	The overflow is clipped, but a scrollbar is added to see the rest of the content.

List

Add one of these to class to change list style.

Classes	Description
`.no-bullets`	No marker is shown in the list item.
`.bullets-inside`	Indents the marker and the text. The bullets appear inside the content flow
`.list-style-circle`	Set the list item marker to circle.
`.list-style-square`	Set the list item marker to square.

Borders

Add border

Add one of these to class to add border on the required side.

Classes	Description
`.border`	Add solid border of 1px on each side.
`.border-top`	Add solid border top of 1px.
`.border-bottom`	Add solid border bottom of 1px.
`.border-left`	Add solid border left of 1px.
`.border-right`	Add solid border right of 1px.

Remove border

Add one of these to class to remove border on the required side.

Classes	Description
`.no-border`	Remove border from all side.
`.no-border-top`	Remove border from the top side.
`.no-border-bottom`	Remove border from the bottom side.
`.no-border-left`	Remove border from the left side.
`.no-border-right`	Remove border from the right side.

Border widths

Add one of these to class to change border width on the required side.

Classes	Description
`.border-2`	Chande border width to 2px on each side.
`.border-top-2`	Chande border width to 2px on top side.
`.border-bottom-2`	Chande border width to 2px on bottom side.
`.border-left-2`	Chande border width to 2px on left side.
`.border-right-2`	Chande border width to 2px on right side.
`.border-3`	Chande border width to 3px on each side.
`.border-top-3`	Chande border width to 3px on top side.
`.border-bottom-3`	Chande border width to 3px on bottom side.
`.border-left-3`	Chande border width to 3px on left side.
`.border-right-3`	Chande border width to 3px on right side.

Remove border radius

Add one of these to class to remove border radius on the required side.

Classes	Description
`.no-border-top-radius`	Remove border radius from top side.
`.no-border-bottom-radius`	Remove border radius from bottom side.
`.no-border-top-left-radius`	Remove border radius from top left side.
`.no-border-top-right-radius`	Remove border radius from top right side.
`.no-border-bottom-left-radius`	Remove border radius from bottom left side.
`.no-border-bottom-right-radius`	Remove border radius from bottom right side.

Size

Width & Height

Add one of these to class to set width of the content.

Classes	Description
`.fit`	Set content maximum width 100%.
`.half-width`	Set content width 50%.
`.full-width`	Set content width 100%.
`.full-height`	Set content height 100%.

Fixed Width

Add one of these to class to set fixed width of the content.

Classes	Description
`.width-{size}`	Set content fixed width in pixel of selected size where size can be 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750 and 800. i.e `.width-50`
`.width-{size}-per`	Set content fixed width in percentage of selected size where size can be 5%, 10%, 15%, 20%, 25%, 30%, 35%, 40%, 45%, 50%, 55%, 60%, 65%, 70%, 75% and 80%. i.e `.width-5-per`

Fixed Height

Add one of these to class to set fixed height of the content.

Classes	Description
`.height-{size}`	Set content fixed height in pixel of selected size where size can be 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750 and 800. i.e `.height-50`
`.height-{size}-per`	Set content fixed height in percentage of selected size where size can be 5%, 10%, 15%, 20%, 25%, 30%, 35%, 40%, 45%, 50%, 55%, 60%, 65%, 70%, 75% and 80%. i.e `.height-5-per`

Image

Add one of these to class to change image size and other property.

Classes	Description
`.bg-cover`	Scale the background image to be as large as possible so that the background area is completely covered by the background image.
`.bg-repeat`	Do not repeat the background image.
`.bg-no-repeat`	Repeat the background image.