Utilities

Examples

The utility API is a Sass-based tool to generate utility classes.

Utilities on Bootstrap

Color & Background

                                                                                
                                        <div class="text-bg-primary p-2">Primary with contrasting color (.text-bg-primary)</div>
                                    
                                    
                                    
                                        <div class="text-bg-secondary p-2">Secondary with contrasting color (.text-bg-secondary)</div>
                                    
                                    
                                    
                                        <div class="text-bg-success p-2">Success with contrasting color (.text-bg-success)</div>
                                    
                                    
                                    
                                        <div class="text-bg-danger p-2">Danger with contrasting color (.text-bg-danger)</div>
                                    
                                    
                                    
                                        <div class="text-bg-warning p-2">Warning with contrasting color (.text-bg-warning)</div>
                                    
                                    
                                    
                                        <div class="text-bg-info p-2">Info with contrasting color (.text-bg-info)</div>
                                    
                                    
                                    
                                        <div class="text-bg-light p-2">Light with contrasting color (.text-bg-light)</div>
                                    
                                    
                                    
                                        <div class="text-bg-dark p-2">Dark with contrasting color (.text-bg-dark)</div>
                                        
                                    
                                    
                                        <div class="text-bg-dark p-2">Purple with contrasting color (.text-bg-dark)</div>

Color and background helpers combine the power of our .text-* utilities and .bg-* utilities in one class. Using our Sass color-contrast() function, we automatically determine a contrasting color for a particular background-color.

Primary with contrasting color (.text-bg-primary)

Secondary with contrasting color (.text-bg-secondary)

Success with contrasting color (.text-bg-success)

Danger with contrasting color (.text-bg-danger)

Warning with contrasting color (.text-bg-warning)

Info with contrasting color (.text-bg-info)

Light with contrasting color (.text-bg-light)

Dark with contrasting color (.text-bg-dark)

Purple with contrasting color (.text-bg-purple)

Background Opacity

                                    
                                        <div class="bg-primary p-2 text-white">This is default primary background</div>
                                        <div class="bg-primary p-2 text-white bg-opacity-75">This is 75% opacity primary
                                            background</div>
                                        <div class="bg-primary p-2 text-dark bg-opacity-50">This is 50% opacity primary
                                            background</div>
                                        <div class="bg-primary p-2 text-dark bg-opacity-25">This is 25% opacity primary
                                            background</div>
                                        <div class="bg-primary p-2 text-dark bg-opacity-10">This is 10% opacity success
                                            background</div>
                                    
                                    
                                    
                                        <div class="bg-dark p-2 mt-4 text-white">This is default dark background</div>
                                        <div class="bg-dark p-2 text-white bg-opacity-75">This is 75% opacity dark
                                            background</div>
                                        <div class="bg-dark p-2 text-dark bg-opacity-50">This is 50% opacity dark
                                            background</div>
                                        <div class="bg-dark p-2 text-dark bg-opacity-25">This is 25% opacity dark
                                            background</div>
                                        <div class="bg-dark p-2 text-dark bg-opacity-10">This is 10% opacity success
                                            background</div>

background-color utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.

This is default primary background

This is 75% opacity primary background

This is 50% opacity primary background

This is 25% opacity primary background

This is 10% opacity success background

This is default dark background

This is 75% opacity dark background

This is 50% opacity dark background

This is 25% opacity dark background

This is 10% opacity success background

Text Opacity Color

                                    
                                        <div class="text-primary">This is default primary text</div>
                                    
                                    
                                    
                                        <div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
                                    
                                    
                                    
                                        <div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
                                    
                                    
                                    
                                        <div class="text-primary text-opacity-25">This is 25% opacity primary text</div>

Text color utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.

This is default primary text

This is 75% opacity primary text

This is 50% opacity primary text

This is 25% opacity primary text

Opacity

                                    
                                        <div class="opacity-100 p-2 bg-primary text-light fw-bold rounded">100%</div>
                                    
                                    
                                    
                                        <div class="opacity-75 p-2 bg-primary text-light fw-bold rounded">75%</div>
                                    
                                    
                                    
                                        <div class="opacity-50 p-2 bg-primary text-light fw-bold rounded">50%</div>
                                    
                                    
                                    
                                        <div class="opacity-25 p-2 bg-primary text-light fw-bold rounded">25%</div>

The opacity property sets the opacity level for an element. The opacity level describes the transparency level, where 1 is not transparent at all, .5 is 50% visible, and 0 is completely transparent. Set the opacity of an element using .opacity-{value} utilities.

100%

75%

50%

25%

Border Radius

                                                                                   
                                        <img src="assets/images/users/user-2.jpg" class="avatar-lg rounded" alt="rounded">
                                    
                                    
                                    
                                        <img src="assets/images/users/user-2.jpg" class="avatar-lg rounded-top" alt="rounded-top">
                                    
                                    
                                    
                                        <img src="assets/images/users/user-2.jpg" class="avatar-lg rounded-end" alt="rounded-end">
                                    
                                    
                                    
                                        <img src="assets/images/users/user-2.jpg" class="avatar-lg rounded-bottom" alt="rounded-bottom">
                                    
                                    
                                    
                                        <img src="assets/images/users/user-2.jpg" class="avatar-lg rounded-start" alt="rounded-start">
                                    
                                    
                                    
                                        <img src="assets/images/users/user-2.jpg" class="avatar-lg rounded-circle" alt="rounded-circle">
                                    
                                    
                                    
                                        <img src="assets/images/stock/small-2.jpg" class="avatar-lg w-auto rounded-pill" alt="rounded-pill">

Add classes to an element to easily round its corners.

Pointer Events

                                    
                                        <p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a>
                                        can not be clicked.</p>
                                    
                                    
                                    
                                        <p><a href="#" class="pe-auto">This link</a> can be clicked (this is default
                                        behavior).</p>
                                    
                                    
                                    
                                        <p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a>
                                            can not be clicked because the
                                            <code>pointer-events</code> property is inherited from its parent. However,
                                            <a href="#" class="pe-auto">this
                                                link</a> has a <code>pe-auto</code> class and can be clicked.
                                        </p>

Bootstrap provides .pe-none and .pe-auto classes to prevent or add element interactions.

This link can not be clicked.

This link can be clicked (this is default behavior).

This link can not be clicked because the pointer-events property is inherited from its parent. However, this link has a pe-auto class and can be clicked.

Border Radius Size

                                                                                   
                                        <img src="assets/images/users/user-4.jpg" class="avatar-lg rounded-0" alt="rounded-0">
                                    
                                    
                                    
                                        <img src="assets/images/users/user-4.jpg" class="avatar-lg rounded-1" alt="rounded-1">
                                    
                                    
                                    
                                        <img src="assets/images/users/user-4.jpg" class="avatar-lg rounded-2" alt="rounded-2">
                                    
                                    
                                    
                                        <img src="assets/images/users/user-4.jpg" class="avatar-lg rounded-3" alt="rounded-3">
                                    
                                    
                                    
                                        <img src="assets/images/users/user-4.jpg" class="avatar-lg rounded-4" alt="rounded-4">
                                    
                                    
                                    
                                        <img src="assets/images/users/user-4.jpg" class="avatar-lg rounded-5" alt="rounded-5">

Use the scaling classes for larger or smaller rounded corners. Sizes range from 0 to 5.

Text Selection

                                    
                                        <p class="text-muted">Use <code>user-select-all</code>, <code>user-select-auto</code>,
                                            or
                                            <code>user-select-none</code> class to the content which is selected when the user
                                            interacts with it.
                                        </p>
                                    
                                    
                                    
                                        <p class="user-select-all">...</p>
                                    
                                    
                                    
                                        <p class="user-select-auto">...</p>
                                        
                                    
                                    
                                        <p class="user-select-none mb-0">...</p>

Use user-select-all, user-select-auto, or user-select-none class to the content which is selected when the user interacts with it.

This paragraph will be entirely selected when clicked by the user.

This paragraph has default select behavior.

This paragraph will not be selectable when clicked by the user.

Overflow

                                                                                   
                                        <div class="overflow-auto p-3 bg-light" style="max-width: 260px; max-height: 100px;">
                                            This is an example of using <code>.overflow-auto</code> on an element
                                            with set width and height dimensions. By
                                            design, this content will vertically scroll.
                                        </div>
                                    
                                    
                                    
                                        <div class="overflow-hidden p-3 bg-light" style="max-width: 260px; max-height: 100px;">
                                            This is an example of using <code>.overflow-hidden</code> on an element
                                            with set width and height dimensions.
                                        </div>
                                    
                                    
                                    
                                        <div class="overflow-visible p-3 bg-light" style="max-width: 260px; max-height: 100px;">
                                            This is an example of using <code>.overflow-visible</code> on an element
                                            with set width and height dimensions.
                                        </div>
                                    
                                    
                                    
                                        <div class="overflow-scroll p-3 bg-light" style="max-width: 260px; max-height: 100px;">
                                            This is an example of using <code>.overflow-scroll</code> on an element
                                            with set width and height dimensions.
                                        </div>

Adjust the overflow property on the fly with four default values and classes. These classes are not responsive by default.

This is an example of using .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll.

This is an example of using .overflow-hidden on an element with set width and height dimensions.

This is an example of using .overflow-visible on an element with set width and height add more text dimensions inspinia admin dashboard template.

This is an example of using .overflow-scroll on an element with set width and height dimensions.

Position in Arrange

                                                                                
                                    <div class="position-absolute top-0 start-0 avatar-xs bg-dark rounded"></div>
                                
                                
                                
                                    <div class="position-absolute top-0 end-0 avatar-xs bg-dark rounded"></div>
                                
                                
                                
                                    <div class="position-absolute top-50 start-50 avatar-xs bg-dark rounded"></div>
                                
                                
                                
                                    <div class="position-absolute bottom-50 end-50 avatar-xs bg-dark rounded"></div>
                                
                                
                                
                                    <div class="position-absolute bottom-0 start-0 avatar-xs bg-dark rounded"></div>
                                
                                
                                
                                    <div class="position-absolute bottom-0 end-0 avatar-xs bg-dark rounded"></div>

Arrange elements easily with the edge positioning utilities. The format is {property}-{position}.

Position in Center

                                    
                                        <div class="position-absolute top-0 start-0 translate-middle avatar-xs bg-dark rounded"></div>
                                    
                                    
                                    
                                        <div class="position-absolute top-0 start-50 translate-middle avatar-xs bg-dark rounded"></div>
                                    
                                    
                                    
                                        <div class="position-absolute top-0 start-100 translate-middle avatar-xs bg-dark rounded"></div>
                                    
                                    
                                    

                                        <div class="position-absolute top-50 start-0 translate-middle avatar-xs bg-dark rounded"></div>
                                    
                                    
                                    
                                        <div class="position-absolute top-50 start-50 translate-middle avatar-xs bg-dark rounded"></div>
                                    
                                    
                                    
                                        <div class="position-absolute top-50 start-100 translate-middle avatar-xs bg-dark rounded"></div>
                                    
                                    
                                    

                                        <div class="position-absolute top-100 start-0 translate-middle avatar-xs bg-dark rounded"></div>
                                    
                                    
                                    
                                        <div class="position-absolute top-100 start-50 translate-middle avatar-xs bg-dark rounded"></div>
                                    
                                    
                                    
                                        <div class="position-absolute top-100 start-100 translate-middle avatar-xs bg-dark rounded"></div>

In addition, you can also center the elements with the transform utility class .translate-middle.

Position in Axis

                                    
                                        <div class="position-absolute top-0 start-0 avatar-xs bg-dark rounded "></div>
                                    
                                    
                                     
                                        <div class="position-absolute top-0 start-50 translate-middle-x avatar-xs bg-dark rounded"></div>
                                    
                                    
                                     
                                        <div class="position-absolute top-0 end-0 avatar-xs bg-dark rounded"></div>
                                    
                                    
                                     

                                        <div class="position-absolute top-50 start-0 translate-middle-y avatar-xs bg-dark rounded"></div>
                                    
                                    
                                     
                                        <div class="position-absolute top-50 start-50 translate-middle avatar-xs bg-dark rounded"></div>
                                    
                                    
                                     
                                        <div class="position-absolute top-50 end-0 translate-middle-y avatar-xs bg-dark rounded"></div>
                                    
                                    
                                     

                                        <div class="position-absolute bottom-0 start-0 avatar-xs bg-dark rounded"></div>
                                    
                                    
                                     
                                        <div class="position-absolute bottom-0 start-50 translate-middle-x avatar-xs bg-dark rounded"></div>
                                    
                                    
                                     
                                        <div class="position-absolute bottom-0 end-0 avatar-xs bg-dark rounded"></div>

By adding .translate-middle-x or .translate-middle-y classes, elements can be positioned only in horizontal or vertical direction.

Shadows

                                    
                                        <div class="shadow-none p-2 mb-2 bg-light rounded">No shadow</div>
                                    
                                    
                                       
                                        <div class="shadow-sm p-2 mb-2 rounded">Small shadow</div>
                                    
                                    
                                     
                                        <div class="shadow p-2 mb-2 rounded">Regular shadow</div>
                                    
                                    
                                      
                                        <div class="shadow-lg p-2 mb-2 rounded">Larger shadow</div>

While shadows on components are disabled by default in Bootstrap and can be enabled via $enable-shadows, you can also quickly add or remove a shadow with our box-shadow utility classes. Includes support for .shadow-none and three default sizes (which have associated variables to match).

No shadow

Small shadow

Regular shadow

Larger shadow

Width

                                    
                                        <div class="w-25 p-2 bg-light">Width 25%</div>
                                    
                                    
                                    
                                        <div class="w-50 p-2 bg-light">Width 50%</div>
                                    
                                    
                                    
                                        <div class="w-75 p-2 bg-light">Width 75%</div>
                                    
                                    
                                    
                                        <div class="w-100 p-2 bg-light">Width 100%</div>
                                    
                                    
                                    
                                        <div class="w-auto p-2 bg-light">Width auto</div>

Width utilities are generated from the utility API in _utilities.scss. Includes support for 25%, 50%, 75%, 100%, and auto by default. Modify those values as you need to generate different utilities here.

Width 25%

Width 50%

Width 75%

Width 100%

Width auto

Height

                                    
                                        <div class="h-25 p-2 bg-light">Height25%</div>
                                    
                                    
                                    
                                        <div class="h-50 p-2 bg-light">Height50%</div>
                                    
                                    
                                    
                                        <div class="h-75 p-2 bg-light">Height75%</div>
                                    
                                    
                                    
                                        <div class="h-100 p-2 bg-light">Height100%</div>
                                    
                                    
                                    
                                        <div class="h-auto p-2 bg-light">Height auto</div>

Height utilities are generated from the utility API in _utilities.scss. Includes support for 25%, 50%, 75%, 100%, and auto by default. Modify those values as you need to generate different utilities here.

Height25%

Height50%

Height75%

Height100%

Height auto

Object Fit

                                                                                   
                                        <div>
                                            <img src="assets/images/stock/small-1.jpg" class="object-fit-contain border rounded avatar-xl" alt="...">
                                            <p class="mt-1 mb-0"><code class="user-select-all">.object-fit-contain</code></p>
                                        </div>
                                    
                                    
                                    
                                        <div>
                                            <img src="assets/images/stock/small-1.jpg" class="object-fit-cover border rounded avatar-xl" alt="...">
                                            <p class="mt-1 mb-0"><code class="user-select-all">.object-fit-cover</code></p>
                                        </div>
                                    
                                    
                                    
                                        <div>
                                            <img src="assets/images/stock/small-1.jpg" class="object-fit-fill border rounded avatar-xl" alt="...">
                                            <p class="mt-1 mb-0"><code class="user-select-all">.object-fit-fill</code></p>
                                        </div>
                                    
                                    
                                    
                                        <div>
                                            <img src="assets/images/stock/small-1.jpg" class="object-fit-scale border rounded avatar-xl" alt="...">
                                            <p class="mt-1 mb-0"><code class="user-select-all">.object-fit-scale</code></p>
                                        </div>
                                    
                                    
                                    
                                        <div>
                                            <img src="assets/images/stock/small-1.jpg" class="object-fit-none border rounded avatar-xl" alt="...">
                                            <p class="mt-1 mb-0"><code class="user-select-all">.object-fit-none</code></p>
                                        </div>

Change the value of the object-fit property with our responsive object-fit utility classes. This property tells the content to fill the parent container in a variety of ways, such as preserving the aspect ratio or stretching to take up as much space as possible.

.object-fit-contain

.object-fit-cover

.object-fit-fill

.object-fit-scale

.object-fit-none

Z-index

                                                        
                                        <div class="z-3 position-absolute p-5 rounded-3 bg-primary-subtle"></div>
                                    
                                    
                                    
                                        <div class="z-2 position-absolute p-5 m-2 rounded-3 bg-success-subtle"></div>
                                    
                                    
                                    
                                        <div class="z-1 position-absolute p-5 m-3 rounded-3 bg-secondary-subtle"></div>
                                    
                                    
                                    
                                        <div class="z-0 position-absolute p-5 m-4 rounded-3 bg-danger-subtle"></div>
                                    
                                    
                                    
                                        <div class="z-n1 position-absolute p-5 m-5 rounded-3 bg-info-subtle"></div>

Use z-index utilities to stack elements on top of one another. Requires a position value other than static, which can be set with custom styles or using our position utilities.