Bootstrap - How to create a small dropdown - html

Question

I want to create a small Bootstrap dropdown, But I don't know how, Here's what it looks like
base.html:
<a class="text-light" 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>
</a>
<ul class="dropdown-menu dropdown-menu-dark bg-dark">
<li><a class="dropdown-item text-light" 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>

Answer 1

As Cervus camelopardalis said in their answer, you should modify the dropdown since Bootstrap doesn't offer different sizes. I've just tried to make the dropdown look like the screenshot you posted as much as I could.
Since your code has some problems, I just used the official dropdown from Boostrap site. This is the latest version, I'll try to explain everything I did.
.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/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/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>
First of all, beside every CSS class, I added !important to override Bootstrap default stuff. In production, you should add your CSS file above Bootstrap CSS and then remove !important.
In the .btn class, I changed the width and height to 30px to change the size of the three dots button, also I removed padding as well as the borders to make it look nicer as the screenshot.
Thanks for Cervus camelopardalis, I used the same code to change the dropdown menu size.