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 setmargin -
p- for classes that setpadding
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 themarginorpaddingby setting it to0 -
1- (by default) for classes that set themarginorpaddingto$spacer-xor$spacer-y -
2- (by default) for classes that set themarginorpaddingto$spacer-x * 1.5or$spacer-y * 1.5 -
3- (by default) for classes that set themarginorpaddingto$spacer-x * 3or$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. |
