Utilities

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

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.2/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.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)

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.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

Sizing

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

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.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

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
© 2017- Pixinvent, Hand-crafted & Made with ❤️