Background

Bootstrap 5 Background is used with the help of the keyword bg. It offers various colors like primary, success, info, warning, danger, secondary, dark, and light.

Utilities

Descriptions

Background color  The background color of the elements is set to contextual class like .bg-primary, .bg-success, and so on.
Background gradient  A linear gradient is applied to the backgrounds by adding color value and the .bg-gradient class to it.
Sass  This involves the Sass map and spacing utilities that are declared in Utility API.

Bootstrap 5 Utility Reference

Bootstrap 5 Utility facilitates various types of utilities to make a stylish, mobile-friendly, and responsive front-end website. The utility layout is used for showing, hiding, aligning, and spacing content.

The complete list of Utilities is listed below with their brief description:

Similar Reads

API

Bootstrap 5 API facilitates Sass-based tool that helps to create the utility classes. Various Utility API with their descriptions are given below:...

Background

Bootstrap 5 Background is used with the help of the keyword bg. It offers various colors like primary, success, info, warning, danger, secondary, dark, and light....

Borders

Bootstrap 5 Borders Helps to create or delete borders from an element, use border utilities. Select all borders at once or all at once....

Colors

Bootstrap 5 Colors utility is used to set the text colors, into green as a success, and blue as a primary. There are lots of other informative colors that we need like danger, warning, and so on....

Display

Bootstrap 5 Display faciliates responsive display utility classes, you may modify the value of the display property. For presentation purposes, we purposefully only support a portion of all potential values....

Flex

With Bootstrap 5 Flex, you can create layouts that are both responsive and visually appealing. To use Bootstrap 5 Flex, you first need to wrap the elements that you want to make flex items in a flex container....

Float

Bootstrap 5 Float classes use the current viewport size to float an element to the left, right, or deactivate floating. !Important is mentioned to prevent issues with specificity...

Interactions

Bootstrap 5 Interactions help us to interact with the contents of the website. Utility classes like text selection and pointer events help us to interact with the website. The utilities classes include text selection and pointer events...

Overflow

Bootstrap 5 Overflow can be enbled when the content exceeds an element’s box, the overflow attribute indicates what should happen.If the content of an element is too large to fit within the defined region, this property indicates whether to clip the content or add scrollbars....

Position

Bootstrap 5 Position is used to set an element’s Position, Bootstrap 5 offers a variety of classes. Although they are available, quick positioning classes are not responsive....

Shadows

Bootstrap 5 Shadows utilities are used to add or remove shadows to bootstrap components or any HTML element in general. There are a total of four shadow utility classes, three for adding the shadows and one for removing any pre-applied shadow from the element....

Sizing

Bootstrap 5 Sizing is a set of utility classes used to set the height and width of the element. Height and width can be set relative to the viewport of the device as well as relative to the parent element....

Spacing

Bootstrap5 spacing utility is used to assign responsive-friendly margin or padding values to an element or a subgroup of its sides. Padding is the area inside of any div or container, as opposed to a margin, which is the area outside of it. Margin and Padding can be added by adding Bootstrap classes in an element or container....

Text

Bootstrap5 Text defines how to change the alignment, weight, line height, wrapping, font size of the text, and more with the help of Bootstrap 5 utilities....

Vertical align

Bootstrap 5 Vertical Alignment utilities only affects inline(Present in one Line), inline-block(Present as blocks in one line), inline-table, and table cell(Elements in a cell of a table) elements....

Visibility

Bootstrap5 visibility utilities do not change the display value and hide information from most users while retaining it for screen readers. It helps to appear and disappear required content as per format....