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 Opacity
.border-opacity-10
.border-opacity-25
.border-opacity-50
.border-opacity-75
.border-opacity-100
Border Radius
Use below-mentioned class to an element to easily round its corners.
.rounded
.rounded-top
.rounded-end
.rounded-bottom
.rounded-start
.rounded-circle
.rounded-top
.rounded-pill
Sizes
.rounded-0
.rounded-1
.rounded-2
.rounded-3
.rounded-4
.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 |
| 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.
Vertical Stacks Examples
<!-- Stacks - Vertical --> <div class="vstack gap-3"> <div class="bg-light border p-1 px-2 material-shadow">First item</div> <div class="bg-light border p-1 px-2 material-shadow">Second item</div> <div class="bg-light border p-1 px-2 material-shadow">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 material-shadow-none">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.
Using horizontal margin utilities like ms-auto as spacers:
Horizontal Stacks Examples
<!-- Stacks - Horizontal --> <div class="hstack gap-3"> <div class="bg-light border material-shadow p-1 px-2">First item</div> <div class="bg-light border material-shadow p-1 px-2">Second item</div> <div class="bg-light border material-shadow p-1 px-2">Third item</div> </div><div class="hstack gap-3"> <div class="bg-light border material-shadow p-1 px-2">First item</div> <div class="bg-light border material-shadow p-1 px-2 ms-auto">Second item</div> <div class="bg-light border material-shadow p-1 px-2">Third item</div> </div> <div class="hstack gap-3"> <div class="bg-light border material-shadow p-1 px-2">First item</div> <div class="vr"></div> <div class="bg-light border material-shadow p-1 px-2">Second item</div> <div class="bg-light border material-shadow 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 material-shadow-none">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.
<!-- 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
.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
.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
.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
.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).
<!-- 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 --> <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.
<!-- 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>