How can I style popover content with custom classes safely?

Asked on Jul 05, 2025

1 Answer

To style popover content with custom classes in Bootstrap 5, you can use the `template` option to customize the popover's HTML structure. This allows you to add custom classes to the popover content safely.

<!-- BEGIN COPY / PASTE -->
        <button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-content="This is a popover!" data-bs-template='<div class="popover custom-popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'>
            Popover with Custom Class
        </button>

        <style>
            .custom-popover {
                background-color: #f8f9fa;
                border: 1px solid #6c757d;
            }
        </style>

        <script>
            var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
            var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
                return new bootstrap.Popover(popoverTriggerEl);
            });
        </script>
        <!-- END COPY / PASTE -->

Additional Comment:

Use the `data-bs-template` attribute to define a custom HTML structure for the popover, allowing you to add custom classes.
The `custom-popover` class in the example is used to apply custom styles to the popover.
Ensure the popover is initialized using JavaScript, as shown in the example.
Customize the styles in the `