#### 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-top`

`.rounded-end`

`.rounded-bottom`

`.rounded-start`

`.rounded-circle`

`.rounded-top`

`.rounded-pill`

##### Sizes

`.rounded-0`

`.rounded-1`

`.rounded-2`

`.rounded-3`

#### 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`
font-weight: 600; | `.fw-semibold`
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

Show Code

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

Show Code

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

Show Code

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

Show Code

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

Show Code

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

Show Code

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

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

Show Code

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

Show Code

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

Show Code

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>

##### Theme Customizer

###### Layout

Choose your layout

##### Vertical

##### Horizontal

##### Two Column

###### Color Scheme

Choose Light or Dark Scheme.

##### Light

##### Dark

###### Layout Width

Choose Fluid or Boxed layout.

##### Fluid

##### Boxed

###### Layout Position

Choose Fixed or Scrollable Layout Position.

Fixed Scrollable

###### Topbar Color

Choose Light or Dark Topbar Color.

##### Light

##### Dark