Utilities

  1. Base UI
  2. Utilities

Borders

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

Border width

.border.border-1

.border.border-2

.border.border-3

.border.border-4

.border.border-5

Additive

.border

.border-top

.border-end

.border-bottom

.border-start

Subtractive

.border-0

.border-top-0

.border-end-0

.border-bottom-0

.border-start-0

Border Color

.border-primary

.border-secondary

.border-success

.border-info

.border-warning

.border-danger

.border-dark

Border Style

.border-dotted

.border-dashed

.border-groove

.border-outset

.border-ridge

.border-inset

Additive

.border-start-dashed

.border-top-dashed

.border-end-dashed

.border-bottom-dashed

Border Radius

Use below-mentioned class to an element to easily round its corners.

rounded

.rounded

rounded-top

.rounded-top

rounded-end

.rounded-end

rounded-bottom

.rounded-bottom

rounded-start

.rounded-start

rounded-circle

.rounded-circle

rounded-top

.rounded-top

rounded-pill

.rounded-pill

Sizes
rounded-0

.rounded-0

rounded-1

.rounded-1

rounded-2

.rounded-2

rounded-3

.rounded-3

rounded-4

.rounded-4

rounded-5

.rounded-5

Display Property

Use below-mentioned class to an element to display the value of components and more with our display utilities.

Display classes
Display Property Class
Display : none .d-none
Display : inline .d-inline
Display : inline-block .d-inline-block
Display : block .d-block
Display : table .d-table
Display : table-cell .d-table-cell
Display : table-row .d-table-row
Display : flex .d-flex
Display : inline-flex .d-inline-flex
Hiding elements
Screen Size Class
Hidden on all .d-none
Hidden only on xs .d-none .d-sm-block
Hidden only on sm .d-sm-none .d-md-block
Hidden only on md .d-md-none .d-lg-block
Hidden only on lg .d-lg-none .d-xl-block
Hidden only on xl .d-xl-none
Visible on all .d-block
Visible only on xs .d-block .d-sm-none
Visible only on sm .d-none .d-sm-block .d-md-none
Visible only on md .d-none .d-md-block .d-lg-none
Visible only on lg .d-none .d-lg-block .d-xl-none
Visible only on xl .d-none .d-xl-block
Display in print

Change the display value of elements when printing with our print display utility classes.

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

Custom Class

Use the below-mentioned class to an element to custom display the value of components and more with our display utilities.

Property Class
font-family: 'Poppins', sans-serif; .ff-base
font-family: 'hkgrotesk', sans-serif; .ff-secondary
font-weight: 500; .fw-medium
min-width: 80px; .w-xs
min-width: 95px; .w-sm
min-width: 110px; .w-md
min-width: 140px; .w-lg
min-width: 160px; .w-xl

Stacks - Vertical

Use vstack class to create vertical layouts. Stacked items are full-width by default. Use gap- class with variation to add space between items.

First item
Second item
Third item
Vertical Stacks Examples
<!-- Stacks - Vertical -->
<div class="vstack gap-3">
    <div class="bg-light border p-1 px-2">First item</div>
    <div class="bg-light border p-1 px-2">Second item</div>
    <div class="bg-light border p-1 px-2">Third item</div>
</div>

<div class="vstack gap-2">
    <button type="button" class="btn btn-primary">Save changes</button>
    <button type="button" class="btn btn-outline-secondary">Cancel</button>
</div>

Stacks - Horizontal

Use hstack class to create horizontal layouts. Stacked items are full-width by default. Use gap- class with variation to add space between items.

First item
Second item
Third item

Using horizontal margin utilities like ms-auto as spacers:

First item
Second item
Third item
First item
Second item
Third item
Horizontal Stacks Examples
<!-- Stacks - Horizontal -->
<div class="hstack gap-3">
    <div class="bg-light border p-1 px-2">First item</div>
    <div class="bg-light border p-1 px-2">Second item</div>
    <div class="bg-light border p-1 px-2">Third item</div>
</div>

<div class="hstack gap-3">
    <div class="bg-light border p-1 px-2">First item</div>
    <div class="bg-light border p-1 px-2 ms-auto">Second item</div>
    <div class="bg-light border p-1 px-2">Third item</div>
</div>

<div class="hstack gap-3">
    <div class="bg-light border p-1 px-2">First item</div>
    <div class="vr"></div>
    <div class="bg-light border p-1 px-2">Second item</div>
    
    <div class="bg-light border p-1 px-2 ms-auto">Third item</div>
</div>

<div class="hstack gap-3"> 
    <input class="form-control me-auto" type="text" placeholder="Add your item here...">
    <button type="button" class="btn btn-primary">Submit</button>
    <div class="vr"></div>
    <button type="button" class="btn btn-outline-secondary">Reset</button>
</div>

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.

<!-- Text Selection -->
<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 mb-0">This paragraph will not be selectable when clicked by the user.</p>

Pointer Events

Use pe-none class to prevent and pe-auto class to add element interactions respectively.

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.

<!-- Pointer events -->
<p><a href="#" class="text-success pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>

<p><a href="#" class="text-success pe-auto">This link</a> can be clicked (this is default behavior).</p>

<p class="pe-none mb-0"><a href="#" class="text-success" 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

Use overflow property on the fly with four default values and classes.

Overflow Auto
This is an example of using .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
Overflow Hidden
This is an example of using .overflow-hidden on an element with set width and height dimensions. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Overflow Visible
This is an example of using .overflow-visible on an element with set width and height dimensions.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Overflow Scroll
This is an example of using .overflow-scroll on an element with set width and height dimensions. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
<!-- Overflow -->
<div class="overflow-hidden p-3 mb-0 bg-light" style="height: 100px;">
    This is an example of using <code>.overflow-hidden</code> on an element with set width and height dimensions. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

<div class="overflow-visible p-3 mb-0 bg-light" style="height: 100px;">
    This is an example of using <code>.overflow-visible</code> on an element with set width and height dimensions.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

<div class="overflow-scroll p-3 mb-0 bg-light" style="height: 100px;">
    This is an example of using <code>.overflow-scroll</code> on an element with set width and height dimensions. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

Position

Use below mentioned classes to arrange elements easily with the edge positioning utilities.The format is {property}-{position}.

Arrange elements
Center elements
Center elements
<!-- Arrange elements -->
<div class="position-relative p-5 bg-light m-3 border rounded" style="height: 180px;">
    <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>
</div>

<!-- Center elements -->
<div class="position-relative m-3 bg-light border rounded" style="height: 180px;">
    <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>
</div>

<!-- Center elements -->
    <div class="position-relative m-3 bg-light border rounded" style="height: 180px;">
    <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>
</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
<!-- Shadows -->
<div class="shadow-none p-3 bg-light rounded">No shadow</div>

<div class="shadow-sm p-3 bg-light rounded">Small shadow</div>

<div class="shadow p-3 bg-light rounded">Regular shadow</div>

<div class="shadow-lg p-3 bg-light rounded">Larger shadow</div>

Width

Use w-25,w-50,w-75,w-100 or w-auto class to set width 25%, 50%, 75%, 100%, or auto by default respectively.

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

<div class="w-50 p-3 bg-light">Width 50%</div>

<div class="w-75 p-3 bg-light">Width 75%</div>

<div class="w-100 p-3 bg-light">Width 100%</div>

<div class="w-auto p-3 bg-light">Width auto</div>

Height

Use h-25,h-50,h-75,h-100 or h-auto class to set height 25%, 50%, 75%, 100%, or auto by default respectively.

Height25%
Height 50%
Height 75%
Height 100%
Height auto
<!-- Height -->
<div class="h-25 p-3 bg-light">Height25%</div>

<div class="h-50 p-3 bg-light">Height50%</div>

<div class="h-75 p-3 bg-light">Height75%</div>

<div class="h-100 p-3 bg-light">Height100%</div>

<div class="h-auto p-3 bg-light">Height auto</div>