.avatar
|
To format an <img> element as a small, rounded avatar.
By default, it is of 2.5rem if no size is specified. |
.avatar-*
|
Use the following size modifier classes (eg. .avatar .avatar-32)
to scale it up to the following sizes: .*-24, .*-32, .*-48, .*-64, .*-96, .*-128. |
.bg-image
|
Use an <img> element as the background for the parent
element. The parent element can have any styles applied, but it must be
set to position: relative. |
.blend-mode-multiply
|
Often used together with .bg-image to blend an <img> element
with the background using the multiply blend mode. |
.border-*-*
|
Use the following responsive border modifier classes (eg. .border-lg-top or .border-md-0)
to add or remove an element’s borders. |
.divider
|
To insert a horizontal rule or a thematic break in an HTML page to divide
or separate document. |
.or-divider
|
or divider
<span class="or-divider">or divider</span>
|
.icon-*
|
Use the following size modifier classes to control the size of an icon.
For example, .icon-32 has an equal height and width of 32px. |
.is-centered
|
To center an element vertically and horizontally quiet painlessly. |
.is-between
|
To align 2 or more elements to fill up the available space. Similar to .d-flex .justify-content-between but
better. |
.o-hidden
|
To hide overflow from an element or .o-visible to allow. |
.opacity-*
|
Use the following opacity modifier classes (eg. .opacity-30)
to change the opacity of the element from 0 to 1. |
.overlay-*
|
Use the following overlay modifier classes (eg. .overlay .overlay-50)
to add transparent overlay to <img>
element or use .overlay-75 for
darker effect. |
.stretched-link
|
Apply .stretched-link to a link to make its containing block
clickable via a ::after pseudo element. |
.min-vh-*
|
Use the following modifier classes (eg. .min-vh-100) to set
the height of the element to a min-height of the specified value (0 - 100)
in viewport height (vh) units. |
.text-light
|
To reverse text color on a darker colored background. |
.transition-hover
|
To move the element away from its original position when it is being hovered. |
.z-*
|
Use the following z-index modifier classes (eg. .z-5) to change
the z-index of the element from 0 to 10. |