Open In App

Bootstrap 5 Utility Reference

Last Updated : 01 Dec, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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:

API

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

Utilities

Descriptions

Custom class prefix  The Custom class prefix utilizes the class option to modify the class prefix.
States The state option can be used to create pseudo-class variations. Example pseudo-classes are :hover and :focus. 
Responsive utilities Include the responsive boolean to produce responsive utilities (such as .opacity-md-25) that function across all breakpoints.
Changing utilities In Changing utilities Replace current utilities by employing the same key.
Print utilities The print option will produce utility classes for print, applied within the media query.
Add utilities In the add utilities the new utilities can be integrate to the default $utilities map along a map-merge.
Modify utilities Modify the current utilities in the default $utilities.
Enable responsive Enable responsive enables responsive classes for the current utilities.
Remove utilities Bootstrap 5 provides a set of utility classes for various use cases and with them Bootstrap also provides a utility API to modify, add or remove these utility classes by using Sass. 
Remove utility in RTL Sometimes RTL styling may be difficult to use for some edge cases therefore Bootstrap 5 provides us this facility to drop the utilities from RTL output by setting the RTL option to false.

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.

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.

Utilities

Descriptions

Border  Borders can be classified into 2 different types that are additive and subtractive.
Additive Bootstrap5 Borders Additive classes are mainly used to display an outline around a box and it provides style, color, and radius of an element border on the side we want. 
Subtractive Borders Subtractive is used to remove borders from the box by defining which side the border is to be removed or we can remove the border from all sides at once.
Border color Border color utilize utilities created using our theme colors to change the border’s color.
Border-width Border width is used to increase or decrease the width of the border as per requirements.
Border-radius Border radius uses the rounded classes, giving an element rounded corners.
Borders Sizes Border Sizes are used to set the border-radius rounded corners larger or smaller. The range of border sizes varies from 0 to 3
Sass It supports the various extension of Languages such as variables, utility API, and mixins.

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. 

Utilities

Descriptions

Colors Specificity To color the text with color utilities like .text-primary for blue color similarly there are many different utilities for different colors.
Sass This involves the utilities that are declared in Utility API.

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.

Utilities

Descriptions

Notation There is no breakpoint abbreviation in the display utility classes that apply to all breakpoints, from xs to xxl. A media query is not applied to those classes since they are applied from min-width: 0; and above.
Hiding elements Use responsive display classes for showing and hiding items based on the device to speed up the construction of mobile-friendly websites.
Display in print Our print display utility classes let you alter an element’s display value while printing. The same display values as our responsive are supported by utility d-*
Sass This involves the utilities that are declared in Utility API.

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. 

Utilities

Descriptions

Enable flex behaviors Utilize display utilities to make a flexbox container that can be customizeable with other flex properties.
Direction Bootstrap 5 flex-direction is a property that controls the direction in which flex items are arranged. The default direction is row, which means that flex items are arranged in a horizontal row.
Justify content Bootstrap 5 flex justify-content is a property that controls the alignment of flex items on the main axis.
Align items Bootstrap 5 flex align-items utilities allow you to change the alignment of flex items on the cross-axis.
Align self Bootstrap 5 flex align-self utilities allow you to change the alignment of a flex item on the cross-axis, independently of the other flex items in the container. 
Fill The Bootstrap 5 flex fill utility allows you to force flex items into equal widths while taking up all available horizontal space. 
Grow and shrink Flex grow determines how much a flex item grows relative to the other flex items in the container when there is extra space whereas Flex shrink determines how much a flex item shrinks relative to the other flex items in the container when there is not enough space for all of the flex items to fit at their natural size.
Auto margins Bootstrap 5 flex auto margins are a set of utility classes that can be used to add auto margins to flex items. 
Wrap Bootstrap 5 flex-wrap is a CSS utility class that allows you to change how flex items wrap in a flex container.
Order Bootstrap 5 flex order is a utility class that can be used to change the visual order of specific flex items. 
Align content Bootstrap 5 Flex Align Content is a set of utilities that allow you to control how flex items are aligned on the cross-axis. 
Media object Bootstrap 5 Flex Media Object is a combination of two Bootstrap classes, .media and .media-body, to create a flexible layout for media objects.
Sass Bootstrap 5 Flex SaaS is a software as a service (SaaS) solution that provides a framework for building responsive web applications using Bootstrap 5.

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

Utilities

Descriptions

Responsive Bootstrap 5 provides support classes like float-sm-start, float-lg-end, etc, to give responsive variations to each float value.
Sass  It involves all float utilities in utility API.

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

Utilities

Descriptions

Text Selection We can change the way in which the content is selected when the user interacts with it. .user-select-* class is used to format the selection of text
Pointer Events Bootstrap provides .pe-none and .pe-auto classes to prevent or add element interactions. If a parent class contains .pe-none class then the child will inherit that property from the parent. To ensure that they are completely neutralized even for keyboard users, you may need to add tabindex=”-1″.
Sass Interaction are declared in bootstrap API in scss/_utilities.scss. We can use our custom scss to modify the default values

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. 

  • Sass: The Sass variables provides the customization of the overflow utilities by changing the $overflows variable in the _variables.scss.

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. 

Utilities

Descriptions

Position values These are quick positioning classes that are not responsive.
Arrange elements Arrange elements with edge positioning utilities with format {property-position}.
Center elements The transform utility class allows you to center the pieces using class .translate-middle. When used with the edge positioning tools, this class’s application of the transformations translateX (-50%) and translateY (-50%) to the element enables absolute element centering.
Sass In Maps, the default position utility values are declared. The position utilities are declared in our utility API. 

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.

  • Sass:  It is a collection of variables and utilities to tweak the values of the shadow by changing the variables in bootstrap’s source code.

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.

Utilities

Descriptions

Relative to the parent These classes are used to set the height and width of the element relative to the parent element.
Relative to the viewport These classes are used to set the height and the width of the element relative to the viewport.
Sass This involves the Sass sizing utilities that are declared in Utility API.

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.

Utilities

Descriptions

Margin and padding Bootstrap provides several short-hand utility classes to add margin and padding between two elements or a  subgroup of an element’s sides to modify its appearance. It allows spacing ranging from .25rem to 3rem.
Horizontal centering There are mx-auto utility for center horizontally.
Negative margin Bootstrap has negative margin classes that can be used to add negative margins to elements as well. These classes have a similar syntax to general spacing classes but with an n just before the size. 
Gap When the display is set to grid, you can make use of gap utilities on the parent grid container. With responsive gap utilities, you don’t have to add margin utilities to individual grid items. 
Sass This involves the Sass map and spacing utilities that are declared in Utility API.

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. 

Utilities

Descriptions

Text alignment We can use text alignment classes to align the text in different positions in different viewports.
Text wrapping and overflow To wrap a text we need to use the .text-wrap class and to prevent a text from wrapping we need to use the .text-nowrap class.
Word break The word break utilities are used to avoid breaking components due to long strings of text.
Text transform  It is used to convert a given text into lower case or upper case. It can also transform the first letter of every word into an uppercase which is called capitalized text.
Font size To change the size of the font instead of using heading classes(e.g., .h1-.h6) we can use .fs classes to change the size of the font.
Font weight and italics These utilities are used to change the weight and style of the text abbreviated as .fw-* and to change the style of the text we can use utilities that are abbreviated as .fst-*
Line height To change the height of the line we can use utilities that are abbreviated as .lh-*.
Monospace Use utility .font-monospace to modify the selection to the monospace.
Reset color It is used the utility text-reset to reset the color of link or the text
Text decoration These classes can be used to decorate the text in different ways. eg. underline.
Sass  This involves the Sass map and spacing utilities that are declared in Utility API.

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.

  • Sass: This involves the utilities that are declared in Utility API.

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.

  • Sass: This involves the utilities that are declared in Utility API.


Similar Reads

Underscore.js Utility Complete Reference
Underscore.js is a lightweight JavaScript library and not a complete framework that was written by Jeremy Ashkenas that provides utility functions for a variety of use cases in our day-to-day common programming tasks. The complete reference for underscore utility is provided below: Function Description _.noConflict()It creates a reference of the gl
2 min read
Node.js Utility Complete Reference
The Util module in node.js provides access to various utility functions. There are various utility modules available in the node.js module library. The modules are extremely useful in developing node based web applications. The Complete list of utility are listed below: Util Description Utility ModuleIt provides access to various utility functions.
4 min read
Primer CSS Utility Complete Reference
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other Primer CSS Animations Primer CSS Fade in AnimationPrimer CSS Fade out Animation Primer C
2 min read
Responsive utility classes in Bootstrap
The responsive utility classes help to build responsive web designs easily. You can hide or display the content of your choice on the web page. You have to define the size of the screen for which you are hiding or displaying the content. Responsive utility classes are defined for five different types of sizes: xs: It denotes the extra small-sized s
4 min read
Bootstrap 5 Streamlining Utility Classes with Updated Naming Convention and Sass API
Bootstrap Utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Utility API is based on a series of Sass maps and functions for generating families of classes with various options. Bootstrap 5 has introduced a new set of utility class names that have been renamed to make them m
3 min read
Can I Create Masonry Layout using Tailwind CSS Utility Classes ?
Yes, you can create a Masonry layout using Tailwind CSS utility classes. A Masonry layout is a popular design pattern used for displaying images or other elements in a grid-like structure where each item is of varying height and width. This layout creates a visually appealing and dynamic design that helps to break the monotony of a traditional grid
3 min read
Node.js Utility Module
Node.js Utility Module: The Util module in node.js provides access to various utility functions. Syntax: const util = require('util'); There are various utility modules available in the node.js module library. The modules are extremely useful in developing node-based web applications. Various utility modules present in node.js are as follows: OS Mo
3 min read
script.aculo.us Toggle Effects Utility
Toggle Effects utility is used for toggling elements with additional animations. It supports three animation props Appear, Blind and Slide. Appear: It simulates the Appear Effect module for hiding and showing elements Slide: It simulates the SlideUp, SlideDown effect modules for hiding and showing elements. Blind: It simulates the BlindUp and Blind
1 min read
Backbone.js noConflict Utility
The Backbone.js noConflict Utility is used when we want the Backbone object as its original value. We can use the return value of the Backbone of this function as a reference to the Backbone. Syntax: var backbone = Backbone.noConflict() ; Parameter: This Function doesn't take any parameter. Example 1: In this example, we will illustrate Backbone.js
2 min read
Typescript Required<Type> Utility Type
In this article, we are going to learn about the Required<Type> in Typescript. TypeScript is a popular programming language used for building scalable and robust applications. One of the features of Typescript is Required<Type> which is a built-in utility type that allows you to create a new type that makes all properties of the origina
4 min read