---- Large popover -------- <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover Title" data-bs-content="This is a large popover on a large-sized button. Click the button again to dismiss.">Large Popover</button> ---- Standard popover -------- <button type="button" class="btn btn-warning" data-bs-toggle="popover" data-bs-title="Popover Title" data-bs-content="This is a standard popover on a standard-sized button. Click the button again to dismiss.">Standard Popover</button> ---- Small alt-dismiss popover -------- <a tabindex="0" class="btn btn-sm btn-success" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="This popover is dismissible with any next click anywhere OTHER THAN the button.">Small Alt-dismiss popover</a> </button> ---- Customized Popover -------- <button type="button" class="btn btn-primary custom-popover" data-bs-toggle="popover" data-bs-placement="right" data-bs-custom-class="custom-popover" data-bs-title="Customized Popover" data-bs-content="This popover's background, border and other attributes are customizable."> Custom popover </button><br><br> ---- Popovers in different directions -------- <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover"> Popover top </button> <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover"> Popover right </button> <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover"> Popover left </button> <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover"> Popover bottom </button>
Custom CSS is required if you wish to style the popover. The following CSS variables are provided in the Bootstrap libraries.
.custom-popover {
--bs-popover-arrow-height: value;
--bs-popover-arrow-margin: value;
--bs-popover-arrow-width: value;
--bs-popover-bg: value;
--bs-popover-body-color: value;
--bs-popover-body-padding-x: value;
--bs-popover-body-padding-y: value;
--bs-popover-border-color: value;
--bs-popover-border-radius: value;
--bs-popover-border-width: value;
--bs-popover-box-shadow: value;
--bs-popover-font-size: value;
--bs-popover-header-bg: value;
--bs-popover-header-color: value;
--bs-popover-header-font-size: value;
--bs-popover-header-padding-x: value;
--bs-popover-header-padding-y: value;
--bs-popover-max-width: value;
}
This will reset the page. Are you sure?