##### Default Popover

Use a default popover in Bootstrap by adding the `data-bs-toggle="popover"` attribute to an element. Set the popover content with the `data-bs-content` attribute.

    <button type="button" class="btn btn-primary" data-bs-placement="top" data-bs-toggle="popover" data-bs-content="This is a very beautiful popover, show some love.">
        Default Popover
    </button>
    <button type="button" class="btn btn-primary" data-bs-custom-class="popover-no-arrow" data-bs-placement="top" data-bs-toggle="popover" data-bs-content="This is a very beautiful popover, show some love.">
        No Arrow Popover
    </button>

##### Popover Directions

Set popover directions in Bootstrap with classes like `data-bs-placement="top"` or `data-bs-placement="bottom"`. These classes control where the popover appears relative to the element.

    <button type="button" class="btn btn-primary" data-bs-custom-class="popover-primary" data-bs-placement="top" data-bs-toggle="popover" title="Top Popover" data-bs-content="This is a very beautiful popover, show some love.">
        Popover on top
    </button>
    <button type="button" class="btn btn-primary" data-bs-custom-class="popover-primary" data-bs-placement="right" data-bs-toggle="popover" title="Right Popover" data-bs-content="This is a very beautiful popover, show some love.">
        Popover on right
    </button>
    <button type="button" class="btn btn-primary" data-bs-custom-class="popover-primary" data-bs-placement="bottom" data-bs-toggle="popover" title="Bottom Popover" data-bs-content="This is a very beautiful popover, show some love.">
        Popover on bottom
    </button>
    <button type="button" class="btn btn-primary" data-bs-custom-class="popover-primary" data-bs-placement="left" data-bs-toggle="popover" title="Left Popover" data-bs-content="This is a very beautiful popover, show some love.">
        Popover on left
    </button>

##### Colored Popover

Apply a custom color to your Bootstrap popover using the `data-bs-custom-class="popover-*"` attribute. This class sets a custom background color for the popover.

    <button type="button" class="btn btn-primary" data-bs-custom-class="popover-primary" data-bs-placement="top" data-bs-toggle="popover" title="Primary Popover" data-bs-content="This is a very beautiful popover, show some love.">
        Primary
    </button>
    <button type="button" class="btn btn-secondary" data-bs-custom-class="popover-secondary" data-bs-placement="top" data-bs-toggle="popover" title="Secondary Popover" data-bs-content="This is a very beautiful popover, show some love.">
        Secondary
    </button>
    <button type="button" class="btn btn-success" data-bs-custom-class="popover-success" data-bs-placement="bottom" data-bs-toggle="popover" title="Success Popover" data-bs-content="This is a very beautiful popover, show some love.">
        Success
    </button>
    <button type="button" class="btn btn-info" data-bs-custom-class="popover-info" data-bs-placement="bottom" data-bs-toggle="popover" title="Info Popover" data-bs-content="This is a very beautiful popover, show some love.">
        Info
    </button>
    <button type="button" class="btn btn-warning" data-bs-custom-class="popover-warning" data-bs-placement="right" data-bs-toggle="popover" title="Warning Popover" data-bs-content="This is a very beautiful popover, show some love.">
        Warning
    </button>
    <button type="button" class="btn btn-danger" data-bs-custom-class="popover-danger" data-bs-placement="right" data-bs-toggle="popover" title="Danger Popover" data-bs-content="This is a very beautiful popover, show some love.">
        Danger
    </button>
    <button type="button" class="btn btn-light" data-bs-custom-class="popover-light" data-bs-placement="left" data-bs-toggle="popover" title="Light Popover" data-bs-content="This is a very beautiful popover, show some love.">
        Light
    </button>
    <button type="button" class="btn btn-dark" data-bs-custom-class="popover-dark" data-bs-placement="left" data-bs-toggle="popover" title="Dark Popover" data-bs-content="This is a very beautiful popover, show some love.">
        Dark
    </button>

Theme Customization

###### Layout:

##### Vertical

##### Horizontal

##### Semi Box

###### Content Width:

##### Default

##### Box

###### Layout Direction:

##### LTR

##### RTL

###### Layout Mode:

##### Light

##### Dark

##### System

###### Sidebar Size:

##### Default

##### Medium

##### Icon

##### Icon hover

###### Sidebar Color:

##### Light

##### Dark