Utilities

Background Color

Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities do not set color, so in some cases you’ll want to use .text-*color utilities.

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-body
.bg-body-secondary
.bg-body-tertiary
.bg-white
.bg-black
.bg-transparent
                                                    
                                                        <div class="bg-primary text-white p-2 mb-2">.bg-primary</div>
                                                        <div class="bg-secondary text-white p-2 mb-2">.bg-secondary</div>
                                                        <div class="bg-success text-white p-2 mb-2">.bg-success</div>
                                                        <div class="bg-danger text-white p-2 mb-2">.bg-danger</div>
                                                        <div class="bg-warning text-dark p-2 mb-2">.bg-warning</div>
                                                        <div class="bg-info text-dark p-2 mb-2">.bg-info</div>
                                                        <div class="bg-light text-dark p-2 mb-2">.bg-light</div>
                                                        <div class="bg-dark p-2 mb-2">.bg-dark</div>
                                                        <div class="bg-body text-dark p-2 mb-2">.bg-body</div>
                                                        <div class="bg-body-secondary text-dark p-2 mb-2">.bg-body-secondary</div>
                                                        <div class="bg-body-tertiary text-dark p-2 mb-2">.bg-body-tertiary</div>
                                                        <div class="bg-white p-2 mb-2">.bg-white</div>
                                                        <div class="bg-black p-2 mb-2">.bg-black</div>
                                                        <div class="bg-transparent text-dark p-2">.bg-transparent</div>
                                                    
                                                

Background Gradient Color

By adding a .bg-gradient class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.

.bg-gradient.bg-primary
.bg-secondary.bg-gradient
.bg-success.bg-gradient
.bg-danger.bg-gradient
.bg-warning.bg-gradient
.bg-info.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-gradient
.bg-black.bg-gradient
                                                    
                                                        <div class="p-2 mb-2 bg-primary bg-gradient text-white">.bg-primary.bg-gradient</div>
                                                        <div class="p-2 mb-2 bg-secondary bg-gradient text-white">.bg-secondary.bg-gradient</div>
                                                        <div class="p-2 mb-2 bg-success bg-gradient text-white">.bg-success.bg-gradient</div>
                                                        <div class="p-2 mb-2 bg-danger bg-gradient text-white">.bg-danger.bg-gradient</div>
                                                        <div class="p-2 mb-2 bg-warning bg-gradient text-dark">.bg-warning.bg-gradient</div>
                                                        <div class="p-2 mb-2 bg-info bg-gradient text-dark">.bg-info.bg-gradient</div>
                                                        <div class="p-2 mb-2 bg-light bg-gradient text-dark">.bg-light.bg-gradient</div>
                                                        <div class="p-2 mb-2 bg-dark bg-gradient text-white">.bg-dark.bg-gradient</div>
                                                        <div class="p-2 mb-2 bg-black bg-gradient text-white">.bg-black.bg-gradient</div>
                                                    
                                                

Soft background

Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities do not set color, so in some cases you’ll want to use .text-* color utilities.

.bg-primary-subtle
.bg-secondary-subtle
.bg-success-subtle
.bg-danger-subtle
.bg-warning-subtle
.bg-info-subtle
.bg-light-subtle
.bg-dark-subtle
.bg-primary-lighten
.bg-secondary-lighten
.bg-success-lighten
.bg-danger-lighten
.bg-warning-lighten
.bg-info-lighten
.bg-light-lighten
.bg-dark-lighten
                                                    
                                                        <div class="row">
                                                            <div class="col-lg-6">
                                                                <div class="d-flex flex-column gap-2">
                                                                    <div class="bg-primary-subtle p-2"><code class="text-primary-emphasis">.text-primary-subtle</code></div>
                                                                    <div class="bg-secondary-subtle p-2"><code class="text-secondary-emphasis">.bg-secondary-subtle </code></div>
                                                                    <div class="bg-success-subtle p-2"><code class="text-success-emphasis">.bg-success-subtle</code></div>
                                                                    <div class="bg-danger-subtle p-2"><code class="text-danger-emphasis">.bg-danger-subtle</code></div>
                                                                    <div class="bg-warning-subtle p-2"><code class="text-warning-emphasis">.bg-warning-subtle</code></div>
                                                                    <div class="bg-info-subtle p-2"><code class="text-info-emphasis">.bg-info-subtle</code></div>
                                                                    <div class="bg-light-subtle p-2"><code class="text-light-emphasis">.bg-light-subtle</code></div>
                                                                    <div class="bg-dark-subtle p-2"><code class="text-dark-emphasis">.bg-dark-subtle</code></div>
                                                                </div>
                                                            </div>

                                                            <div class="col-lg-6">
                                                                <div class="d-flex flex-column gap-2">
                                                                    <div class="bg-primary-lighten p-2"><code class="text-primary-emphasis">.text-primary-lighten</code></div>
                                                                    <div class="bg-secondary-lighten p-2"><code class="text-secondary-emphasis">.bg-secondary-lighten </code></div>
                                                                    <div class="bg-success-lighten p-2"><code class="text-success-emphasis">.bg-success-lighten</code></div>
                                                                    <div class="bg-danger-lighten p-2"><code class="text-danger-emphasis">.bg-danger-lighten</code></div>
                                                                    <div class="bg-warning-lighten p-2"><code class="text-warning-emphasis">.bg-warning-lighten</code></div>
                                                                    <div class="bg-info-lighten p-2"><code class="text-info-emphasis">.bg-info-lighten</code></div>
                                                                    <div class="bg-light-lighten p-2"><code class="text-light-emphasis">.bg-light-lighten</code></div>
                                                                    <div class="bg-dark-lighten p-2"><code class="text-dark-emphasis">.bg-dark-lighten</code></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    
                                                

Color & background

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)
                                                    
                                                        <div class="d-flex flex-column gap-2">
                                                            <div class="text-bg-primary p-2">Primary with contrasting color</div>
                                                            <div class="text-bg-secondary p-2">Secondary with contrasting color</div>
                                                            <div class="text-bg-success p-2">Success with contrasting color</div>
                                                            <div class="text-bg-danger p-2">Danger with contrasting color</div>
                                                            <div class="text-bg-warning p-2">Warning with contrasting color</div>
                                                            <div class="text-bg-info p-2">Info with contrasting color</div>
                                                            <div class="text-bg-light p-2">Light with contrasting color</div>
                                                            <div class="text-bg-dark p-2">Dark with contrasting color</div>
                                                        </div>
                                                    
                                                

Colored links

You can use the .link-* classes to colorize links. Unlike the .text-* classes, these classes have a :hover and :focus state.

Background Opacity

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

Text Color

Colorize text with color utilities. If you want to colorize links, you can use the .link-* helper classes which have :hover and :focus states.

.text-primary

.text-primary-emphasis

.text-secondary

.text-secondary-emphasis

.text-success

.text-success-emphasis

.text-danger

.text-danger-emphasis

.text-warning

.text-warning-emphasis

.text-info

.text-info-emphasis

.text-light

.text-light-emphasis

.text-dark

.text-dark-emphasis

.text-muted

.text-body

.text-body-emphasis

.text-body-secondary

.text-body-tertiary

.text-black

.text-white

.text-black-50

.text-white-50

                                                    
                                                        <p class="text-primary">.text-primary</p>
                                                        <p class="text-primary-emphasis">.text-primary-emphasis</p>
                                                        <p class="text-secondary">.text-secondary</p>
                                                        <p class="text-secondary-emphasis">.text-secondary-emphasis</p>
                                                        <p class="text-success">.text-success</p>
                                                        <p class="text-success-emphasis">.text-success-emphasis</p>
                                                        <p class="text-danger">.text-danger</p>
                                                        <p class="text-danger-emphasis">.text-danger-emphasis</p>
                                                        <p class="text-warning">.text-warning</p>
                                                        <p class="text-warning-emphasis">.text-warning-emphasis</p>
                                                        <p class="text-info">.text-info</p>
                                                        <p class="text-info-emphasis">.text-info-emphasis</p>
                                                        <p class="text-light bg-dark">.text-light</p>
                                                        <p class="text-light-emphasis">.text-light-emphasis</p>
                                                        <p class="text-dark">.text-dark</p>
                                                        <p class="text-dark-emphasis">.text-dark-emphasis</p>
                                                        <p class="text-muted">.text-muted</p>
                                                        <p class="text-body">.text-body</p>
                                                        <p class="text-body-emphasis">.text-body-emphasis</p>
                                                        <p class="text-body-secondary">.text-body-secondary</p>
                                                        <p class="text-body-tertiary">.text-body-tertiary</p>
                                                        <p class="text-black">.text-black</p>
                                                        <p class="text-white bg-dark">.text-white</p>
                                                        <p class="text-black-50">.text-black-50</p>
                                                        <p class="text-white-50 bg-dark">.text-white-50</p>
                                                    
                                                

Text Opacity Color

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

Opacity

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

Additive(Add) Border

Use border utilities to add an element’s borders. Choose from all borders or one at a time.

                                                    
                                                        <span class="border"></span>
                                                        <span class="border-top"></span>
                                                        <span class="border-end"></span>
                                                        <span class="border-bottom"></span>
                                                        <span class="border-start"></span>
                                                    
                                                

Subtractive(Remove) Border

Use border utilities to remove an element’s borders. Choose from all borders or one at a time.

                                                    
                                                        <span class="border border-0"></span>
                                                        <span class="border border-top-0"></span>
                                                        <span class="border border-end-0"></span>
                                                        <span class="border border-bottom-0"></span>
                                                        <span class="border border-start-0"></span>
                                                    
                                                

Border Color

Change the border color using utilities built on our theme colors.

                                                    
                                                        <span class="border border-primary"></span>
                                                        <span class="border border-secondary"></span>
                                                        <span class="border border-success"></span>
                                                        <span class="border border-danger"></span>
                                                        <span class="border border-warning"></span>
                                                        <span class="border border-info"></span>
                                                        <span class="border border-light"></span>
                                                        <span class="border border-dark"></span>
                                                    
                                                

Border Width Size

                                                    
                                                        <span class="border border-1"></span>
                                                        <span class="border border-2"></span>
                                                        <span class="border border-3"></span>
                                                        <span class="border border-4"></span>
                                                        <span class="border border-5"></span>
                                                    
                                                

Border Opacity

choose from any of the .border-opacity utilities:

This is default success border
This is 75% opacity success border
This is 50% opacity success border
This is 25% opacity success border
This is 10% opacity success border
                                                    
                                                        <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>
                                                    
                                                

Border subtle Color

Change the border color using utilities built on our theme colors.

                                                    
                                                        <span class="border border-primary-subtle"></span>
                                                        <span class="border border-secondary-subtle"></span>
                                                        <span class="border border-success-subtle"></span>
                                                        <span class="border border-danger-subtle"></span>
                                                        <span class="border border-warning-subtle"></span>
                                                        <span class="border border-info-subtle"></span>
                                                        <span class="border border-light-subtle"></span>
                                                        <span class="border border-dark-subtle"></span>
                                                    
                                                

Border Radius

Add classes to an element to easily round its corners.

rounded rounded-top rounded-end rounded-bottom rounded-start rounded-circle rounded-pill
                                                    
                                                        <img src="..." class="rounded" alt="...">
                                                        <img src="..." class="rounded-top" alt="...">
                                                        <img src="..." class="rounded-end" alt="...">
                                                        <img src="..." class="rounded-bottom" alt="...">
                                                        <img src="..." class="rounded-start" alt="...">
                                                        <img src="..." class="rounded-circle" alt="...">
                                                        <img src="..." class="rounded-pill" alt="...">
                                                    
                                                

Border Radius Size

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

rounded-0 rounded-1 rounded-2 rounded-3 rounded-4 rounded-5
                                                    
                                                        <img src="..." class="rounded-0" alt="...">
                                                        <img src="..." class="rounded-1" alt="...">
                                                        <img src="..." class="rounded-2" alt="...">
                                                        <img src="..." class="rounded-3" alt="...">
                                                        <img src="..." class="rounded-4" alt="...">
                                                        <img src="..." class="rounded-5" alt="...">
                                                    
                                                

Text Selection

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.

                                                    
                                                        <p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
                                                        <p class="user-select-auto">This paragraph has default select behavior.</p>
                                                        <p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>
                                                    
                                                

Pointer Events

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.

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

Overflow

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 dimensions.
This is an example of using .overflow-scroll on an element with set width and height dimensions.
                                                    
                                                        <div class="overflow-auto">...</div>
                                                        <div class="overflow-hidden">...</div>
                                                        <div class="overflow-visible">...</div>
                                                        <div class="overflow-scroll">...</div>
                                                    
                                                

Position in Arrange

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

                                                    
                                                        <div class="position-relative">
                                                            <div class="position-absolute top-0 start-0"></div>
                                                            <div class="position-absolute top-0 end-0"></div>
                                                            <div class="position-absolute top-50 start-50"></div>
                                                            <div class="position-absolute bottom-50 end-50"></div>
                                                            <div class="position-absolute bottom-0 start-0"></div>
                                                            <div class="position-absolute bottom-0 end-0"></div>
                                                        </div>
                                                    
                                                

Position in Center

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

                                                    
                                                        <div class="position-relative">
                                                            <div class="position-absolute top-0 start-0 translate-middle"></div>
                                                            <div class="position-absolute top-0 start-50 translate-middle"></div>
                                                            <div class="position-absolute top-0 start-100 translate-middle"></div>
                                                            <div class="position-absolute top-50 start-0 translate-middle"></div>
                                                            <div class="position-absolute top-50 start-50 translate-middle"></div>
                                                            <div class="position-absolute top-50 start-100 translate-middle"></div>
                                                            <div class="position-absolute top-100 start-0 translate-middle"></div>
                                                            <div class="position-absolute top-100 start-50 translate-middle"></div>
                                                            <div class="position-absolute top-100 start-100 translate-middle"></div>
                                                        </div>
                                                    
                                                

Position in Axis

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

                                                    
                                                        <div class="position-relative">
                                                            <div class="position-absolute top-0 start-0"></div>
                                                            <div class="position-absolute top-0 start-50 translate-middle-x"></div>
                                                            <div class="position-absolute top-0 end-0"></div>
                                                            <div class="position-absolute top-50 start-0 translate-middle-y"></div>
                                                            <div class="position-absolute top-50 start-50 translate-middle"></div>
                                                            <div class="position-absolute top-50 end-0 translate-middle-y"></div>
                                                            <div class="position-absolute bottom-0 start-0"></div>
                                                            <div class="position-absolute bottom-0 start-50 translate-middle-x"></div>
                                                            <div class="position-absolute bottom-0 end-0"></div>
                                                        </div>
                                                    
                                                

Shadows

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

Width

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

Height

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

Object fit

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

                                                    
                                                        <div class="d-flex align-items-start flex-wrap gap-3 text-center">
                                                            <div>
                                                                <img src="assets/images/small/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/small/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/small/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/small/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/small/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>
                                                        </div>
                                                    
                                                

Z-index

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.

                                                    
                                                        <div class="position-relative" style="height: 220px;z-index: 1;">
                                                            <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>
                                                        </div>
                                                    
                                                
Theme Settings
Choose Layout
Vertical
Horizontal
Color Scheme
Light
Dark
Layout Mode
Fluid
Boxed
Detached
Topbar Color
Light
Dark
Brand
Menu Color
Light
Dark
Brand
Layout Position