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.
.m-{size} To set margin 4 sides of the element use .m-{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.
.p-{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
.d-inline Forces the element to behave like an inline element.
.d-inline-block Forces the element to behave like an inline-block element.
.d-block Forces the element to behave like an block element.
.d-none 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.
.position-sticky Changes element's position to sticky.
Vertical alignment

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

Classes Description
.align-top Changes element's vertical alignment to top.
.align-middle Changes element's vertical alignment to middle.
.align-bottom Changes element's vertical alignment to bottom.
.align-baseline Changes element's vertical alignment to baseline.
.align-text-top Top of the element is aligned with the top of the parent element's font.
.align-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
.list-unstyled 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
border-0 Remove border from all side.
border-top-0 Remove border from the top side.
border-bottom-0 Remove border from the bottom side.
border-left-0 Remove border from the left side.
border-right-0 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
.border-0-top-radius Remove border radius from top side.
.border-0-bottom-radius Remove border radius from bottom side.
.border-0-top-left-radius Remove border radius from top left side.
.border-0-top-right-radius Remove border radius from top right side.
.border-0-bottom-left-radius Remove border radius from bottom left side.
.border-0-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.