According to Cervus camelopardalis, the dropdown should be modified as Bootstrap does not provide varying sizes. I attempted to replicate the appearance of the dropdown in the screenshot you shared.
Due to issues in your code, I opted to utilize the official dropdown from the Bootstrap site, which is the most recent version. Below, I will detail the steps I took.
.btn {
width: 30px !important;
height: 30px !important;
padding: 0 !important;
border: none !important;
}
.dropdown-menu {
min-width: 100px !important;
}
.dropdown-item {
padding: 0px 5px !important;
font-size: 12px !important;
}
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abc9c4c4dfd8dfd9cadbeb9e8599859b">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4d2f2222393e393f2c3d0d78637f637d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
<button class="btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<svg width="12" height="14" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
<path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</svg>
</button>
<ul class="dropdown-menu dropdown-menu-dark bg-dark">
<li><a class="dropdown-item" href="#">edit</a></li>
<li><a class="dropdown-item text-warning" href="#">report</a></li>
<li><hr class="dropdown-divider border-top border-secondary"></li>
<li><a class="dropdown-item text-danger" href="#">delete</a></li>
</ul>
</div>
To override Bootstrap's default styles, I added !important
after each CSS class. In a live environment, it's recommended to place your CSS file before Bootstrap's and then remove !important
.
In the .btn
class, I adjusted the width and height to 30px
, removed padding and borders to enhance the appearance of the three dots button per the screenshot provided.
Credit goes to Cervus camelopardalis for helping with resizing the dropdown menu using the same approach.