Building a Compact Dropdown Menu in Bootstrap

I am looking to implement a compact Bootstrap dropdown feature, but I am unsure of how to do it. Take a look at this image for reference.

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

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to initiate a CSS transition without hovering over it

Currently, I have a sidebar that is hidden and only shows up when the mouse hovers over it. I'm wondering how I can make the CSS transition trigger before the mouse hover, similar to what happens in this sidebar link: . Any advice on how to achieve th ...

Overflow of text arranged horizontally within a span element situated inside a div container

I am currently working on developing a ticketing system that involves using nested div elements to organize content. Each ticket is represented by a main div containing various other nested divs and media such as images. While the functionality of the sys ...

Set the style of the mat-select element

I'm having an issue with my select option in Angular Material. The options look fine, but when I select one, the strong tag disappears. Can anyone help me style only that part? Thank you in advance. <mat-select formControlName="projectId" ...

Tips for transforming a menu into a dropdown menu

Is there a way to convert the current menu into a Dropdown menu? Currently, the menu is not collapsing and it keeps opening. Any suggestions on how to achieve this? Here is an example for reference: https://i.stack.imgur.com/2X8jT.png ar ...

Struggling with Angular 8: Attempting to utilize form data for string formatting in a service, but encountering persistent page reloading and failure to reassign variables from form values

My goal is to extract the zip code from a form, create a URL based on that zip code, make an API call using that URL, and then display the JSON data on the screen. I have successfully generated the URL and retrieved the necessary data. However, I am strug ...

Struggling to modify the page width using CSS and HTML on Wordpress, facing unexpected limitations

I've exhausted all my options. I've attempted to add a certain % page width globally using CSS in the editor, page template, and customizer but it's just not working. It's frustrating because I'm using the Twenty Twenty Two theme, ...

Adding a Video as a Background Button Using HTML and CSS

My attempt to utilize background-image in CSS for the button background was unsuccessful as it only supports images, not videos. Is there a way to set a video as the background of a button? My goal is to create a button with a continuously looped muted v ...

What is the best way to call a JavaScript function with multiple arguments from a Silverlight project?

I encountered an issue when trying to invoke a JavaScript function with multiple arguments from an HTML page. Here is what I am attempting to do: wbNavigator.Navigate(new Uri("http://localhost:56433/route.html", UriKind.Absolute)); object results = wbNavi ...

Increase in textbox size depending on selected dropdown value

Our concept involves offering three choices: Email #1 pulled from the database Email #2 retrieved from the database Input a new email Should the user select option #3, a textbox will expand at the bottom of the dropdown menu for easy entry of a new emai ...

Remove checkbox in a selected option of a dropdown menu using JQuery

I apologize for the unusual title. Here's what I'm looking for: I have a dropdown menu with several options, and two of them are labeled as "special". If one of these special options is selected, three checkboxes should be disabled or hidden. B ...

What are the steps to create a basic chrome extension that functions as a countdown clock?

I am a beginner in the world of coding and I am currently working on creating a chrome extension that serves as a timer. My goal is to include the timer within the HTML popup file, allowing users to customize the settings themselves. Do you have any advice ...

The complexities of stopPropagation() causing further confusion

I have encountered an issue with my code. It currently allows a dropdown functionality for a <ul> element, but when a child <li> is clicked, it also closes other menus of the same type. To fix this, I used an if clause to check if the clicked ...

Manipulating divs by positioning them at the top, left, right, bottom, and center to occupy the entire visible portion of the page

Many suggest avoiding the use of table layouts and opting for divs and CSS instead, which I am happy to embrace. Please forgive me for asking a basic question. I am looking to create a layout where the center content stretches out to cover the entire visi ...

Bootstrap 5 does not fire the show.bs.dropdown and hide.bs.dropdown events

I'm currently working on a website using webpack4 and bootstrap 5, and I want to incorporate animations into the dropdown menu. I came across advice online suggesting the following code: $('.dropdown').on('show.bs.dropdown', f ...

Connecting components in React using their IDs on the same page

In my project to create a one-page website in React, I have divided it into different components such as a navbar component and an education component. My goal now is to link the navbar to the education section. In my App.js file, I am including the educat ...

Preserve the visibility of a text input form while the checkbox is selected

Within my HTML code, there is a form that includes a checkbox labeled "other." When this checkbox is selected, a textbox will appear. If the user types in text and submits the form, the textbox disappears, but the checkbox remains checked (as saved in loca ...

Implement horizontal scrolling feature to code container

One cool feature on my blog is the codebox where I can insert snippets of HTML, CSS, and Javascript codes. Here's an example of how my CSS code looks: .post blockquote { background-image: url("https://dl.dropbox.com/u/76401970/All%20Blogger%20Tr ...

How to Implement Loading Image with CSS

I have customized the CSS code below to style a div element that showcases a responsive image. .my-img-container { position: relative; &:before { display: block; content: " "; background: url("https://lorempixel.com/300/160/") ...

interactive dropdown feature using the select element with ajax on the onselect event

I am currently working on a web application where I have a drop-down list of categories. Upon selecting a category, the server fetches data in JSON format with subcategories related to that specific category. Based on this data, I'm dynamically popula ...

Troubleshoot: Font Rendering Issue with CSS3 @font-face in Opera 11.x

Having some trouble with Opera not displaying my HTML5 site correctly. Everything looks good in Safari, Chrome, IE9, Firefox 3.5+ and more. Wondering if anyone has encountered this before and found a solution. Here's the breakdown of my setup: In the ...