Search code examples
layoutbootstrap-4popover

how to get rid of white space in a popover menu?

I'm trying to get rid of the white margin/gutter in the popover, so that the yellow buttons span the entire width of the popover. How can I achieve this?

enter image description here

Code:

  <button type="button" data-html="true" class="btn btn-secondary btn-sm btn mr-1 "
      data-trigger="focus" data-container="body" data-toggle="popover" data-placement="bottom"
      data-content= '<div style="display: none">
<ul class="list-group custom-popover ml-0 px-0">
  <li class="list-group-item"><a href="profile.php">Profile</a></li>
  <li class="list-group-item"><a href="includes/logout.php">Logout</a></li>
</ul>
</div>'>
<?php echo 'popover menu'?></button>
Solution

  • To change styles of the popover you can use just CSS. The solution to your problem is just adding this to your custom css file.

    .popover-body{
  padding: 0px;
}

    If you'll like to know all the styles that go into play when boostrap cretes the popover you can check them on the file named: _popover.scss in the folder you downloaded from boostrap.