Prefer Bootstrap Utilities for all common utilities. Read the official
Bootstrap Documentation for a
full list of utilities.
Build whatever you want without a single line of CSS/SASS code by just using our low-level extended utility classes.
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 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.2/utilities/text/#font-size
| Class | Value |
|---|---|
.fs-{value}
|
tiny | big | large | xlarge |
Font Weight
Additional font weight utilities classes to quickly change the weight (boldness). Refer Bootstrap default font weight classes. https://getbootstrap.com/docs/5.2/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.2/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) |
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.2/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 |
Width and height utilities for custom sizing.
Refer default Bootstrap Sizing
classes https://getbootstrap.com/docs/5.2/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 |
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.2/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.2/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 |
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 |