Bootstrap - How to create a small dropdown-CodePudding

I want to create a small Bootstrap dropdown, But I don't know how, Here's what it looks like

base.html:

    <a  data-bs-toggle="dropdown" aria-expanded="false">
        <svg width="12" height="14" fill="currentColor"  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 >
        <li><a  href="#">edit</a></li>
        <li><a  href="#">report</a></li>
        <li><hr ></li>
        <li><a  href="#">delete</a></li>
      </ul>

CodePudding user response：

Here you go...

You just have to customize the default dropdown a little bit.

See the snippet below.

.dropdown-menu {
  min-width: 60px !important;
}

.dropdown-item {
  padding: 0px 5px !important;
  font-size: 12px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div >
  <button  type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul  aria-labelledby="dropdownMenuButton1">
    <li><a  href="#">Edit</a></li>
    <li><a  href="#">Report</a></li>
    <li><a  href="#">Delete</a></li>
  </ul>
</div>

CodePudding user response：

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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div >
    <button  type="button" data-bs-toggle="dropdown" aria-expanded="false">
        <svg width="12" height="14" fill="currentColor"  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 >
        <li><a  href="#">edit</a></li>
        <li><a  href="#">report</a></li>
        <li><hr ></li>
        <li><a  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.