Opacity#

Opacity classes are used to set different opacity style like .25,.50,.75,1.
For example, .opacity-25

Class	Value
opacity-{value}	25 | 50 | 75 | 100

Text#

Text utilities to quickly style the text of an element. Great to control size, color, weight, and more...

Font Size#

Additional font size to any element by using the following utilities classes. For example, .fs-tiny.Refer Bootstrap default font size utility classes. https://getbootstrap.com/docs/5.3/utilities/text/#font-size

Class	Value
.fs-{value}	tiny | big | large | xlarge | xxlarge

Font Weight#

Additional font weight utilities classes to quickly change the weight (boldness). Refer Bootstrap default font weight classes. https://getbootstrap.com/docs/5.3/utilities/text/#fw-and-italics

Class	Description
.fw-semibold	Semibold font weight

Line Height#

Additional line-height utilities classes to quickly set line-height. Refer Bootstrap default font weight classes. https://getbootstrap.com/docs/5.3/utilities/text/#line-height

Class	Description
.lh-inherit	To set inherit line height

Transform#

The transform property applies a 2D or 3D transformation to an element.This utility classes(RTL supported) allows you to rotate, scale etc..

Class	Description
.rotate-{0|90|180|270}	To rotate text clockwise, For example, .rotate-0
.rotate-n{90|180|270}	To rotate text anti-clockwise, For example, .rotate-n90
.scaleX-n1	To scale text to X (To flip only in LTR).
.scaleY-n1	To scale text to Y (To flip only in LTR)
.scaleX-n1-rtl	To scale text to X (To flip only in RTL).
.scaleY-n1-rtl	To scale text to Y (To flip only in RTL)

Border#

Use additional border utilities to add or remove an element’s borders. Choose from all borders or one at a time.
Refer default Bootstrap border classes https://getbootstrap.com/docs/5.3/utilities/borders/

Class	Description
.border-light	To set light border to element
.border-transparent	To set transparent border
.row-bordered	To add border to row's .col-* class
.row-border-light	To add light border color to row's .col-* class. Use this class with .row-bordered

Sizing#

Width and height utilities for custom sizing.
Refer default Bootstrap Sizing classes https://getbootstrap.com/docs/5.3/utilities/sizing/

Height#

Set height in px to any element by using the following utilities class. For example, .h-px-20

Class	Value
.h-px-{value}	20 | 30 | 40 | 50 | 75 | 100 | 150 | 200 | 250 | 300 | 350 | 400 | 500

Width#

Set width in px to any element by using the following utilities class. For example, .w-px-20

Class	Value
.w-px-{value}	20 | 30 | 40 | 50 | 75 | 100 | 150 | 200 | 250 | 300 | 350 | 400 | 500

Colors#

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.

Background Color#

You can easily set the background color of an element using this utilities classes. For example, .bg-light
Refer default Bootstrap Background Colors classes https://getbootstrap.com/docs/5.3/utilities/colors/#background-color

Class	Value
.bg-{value}	light | lighter | lightest

Text Color#

You can set a text color quickly to any element by using the following utilities class. For example, .text-light
Refer default Bootstrap Text Colors classes https://getbootstrap.com/docs/5.3/utilities/colors/#color

Class	Value
.text-{color}	light | lighter | lightest

Invertible Color#

Invertible Color flips the colors are the opposite—white turns to black, light colors turn to dark colors.

Class	Value
.invert-text-{value}	white | dark
.invert-bg-{value}	white | dark
.invert-border-{value}	white | dark

Misc#

Container#

The table below illustrates how each container adds margin and paddings to the X & Y

Class	Description
.container-p-x	To set padding to X axis
.container-m-nx	To set negative margin to X axis
.container-p-y	To set padding to Y axis
.container-m-ny	To set negative margin to Y axis

Cursor#

Set cursor option to any element by using the following utilities class.

Class	Description
.cursor-pointer	To set cursor to pointer
.cursor-move	To set move/grab cursor

Table#

The table below illustrates useful table classes.

Class	Description
.cell-fit	Fit table cell width to content