Achieving Horizontal Alignment in a Dropdown Menu with Bootstrap 4

I am utilizing a dropdown that contains 3 main "categories", each with multiple checkboxes for filtering search results. Below is an example:

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Button</button>
    <div class="dropdown-menu">
        <h6 class="dropdown-header">Category 1:</h6>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option1</a>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option2</a>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option3</a>

        <h6 class="dropdown-header">Category 2:</h6>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option1</a>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option2</a>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option3</a>

        <h6 class="dropdown-header">Category 3:</h6>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option1</a>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option2</a>
        <a class="dropdown-item" href="#"><input type="checkbox"> Option3</a>
    </div>
</div>

I am looking to have the 3 main "categories" displayed side by side in the dropdown, but the default Bootstrap styling presents them as a vertical stack. I attempted to use the grid system by applying the row class to the dropdown and adding a col-4 for each "category", but it did not yield the desired outcome. How can I achieve the layout where each "category" is positioned next to each other with their respective checkboxes below?

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Answer №1

Enclose everything within a single 

<div class="dropdown-item">
. Next, insert a .row within and include 3 .col elements inside that row. Finally, place each list group along with the heading inside their respective column.

Press the "run code snippet" button below and expand to full page: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Button</button>
    <div class="dropdown-menu">
        <div class="dropdown-item">
            <div class="row">
                <div class="col">
                    <h6>Category 1:</h6>
                    <ul class="list-group">
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option1</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option2</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option3</a></li>
                    </ul>
                </div>
                <div class="col">
                    <h6>Category 2:</h6>
                    <ul class="list-group">
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option1</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option2</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option3</a></li>
                    </ul>
                </div>
                <div class="col">
                    <h6>Category 3:</h6>
                    <ul class="list-group">
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option1</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option2</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option3</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Note: in order for the checkboxes to work, you must replace the a tags with label tags.

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

Opt for CSS (or JavaScript) over SMIL for better styling and animation control

I recently noticed an alert in my Chrome console that SVG's SMIL animations are being deprecated and will soon be removed. The message suggested using CSS or Web animations instead. Since I want to transition from SMIL to CSS animations, there are a ...

javascripthtmlcsssvgsmil

Using JavaScript to set the value of an input text field in HTML is not functioning as expected

I am a beginner in the programming world and I am facing a minor issue My challenge lies with a form called "fr" that has an input text box labeled "in" and a variable "n" holding the value of "my text". Below is the code snippet: <html> <head&g ...

javascripthtmlinputassign

What is the best way to remove excess content that falls outside the viewBox?

Is there a function or method to trim a path that extends beyond the viewbox rather than simply concealing it? I am currently using svg-edit, which has a specific viewbox or canvas area. Any elements drawn outside of this canvas remain hidden. However, wh ...

javascripthtmlsvgjquery-svgsvg-edit

Align content to the bottom using Bootstrap 4

Looking for help with aligning content to the middle and bottom on a full-page bootstrap layout? The first page has a background image in the first div, and a darker layer on top in the second div. <div class="h-100 w-100"> <div class="h-100 w-10 ...

htmlcsstwitter-bootstrapflexbox

Leveraging Enum with sec:authorize="hasRole(...)" for user authentication in a Spring Boot and Thymeleaf application

Trying to make a change: <div sec:authorize="hasRole('ADMIN')"></div> to: <div sec:authorize="hasRole(${T(com.mypackage.Role).ADMIN.getText()})"></div> However, the above modification is not working. ...

htmlspring-bootspring-securitythymeleafspring-thymeleaf

Creating an HTML form that adjusts its size and layout based

Struggling to make my HTML Form responsive - it displays well on desktops, but not on mobile devices or tablets. Want to take a look at the code? Here's the link: JSFiddle I've attempted removing overflow: hidden and white-space: nowrap; from t ...

htmlcssformsresponsivebootstrap-5

Toggle the visibility of table rows based on a specific class using a checkbox

I am currently working on a code that displays the results of a query in a table format. I would like to have the ability to click on certain elements to show or hide them. I know this can be achieved using toggle and CSS, but I keep encountering obstacles ...

javascriptjqueryhtmlcss

"Struggling with the height of Bootstrap row not filling the entire space

I've tried everything but nothing seems to be working. Whether it's a simple height: 100% or experimenting with flex-grow: 1, none of it is doing the trick. I'm having issues with this site I'm currently working on: https://i.sstatic.n ...

htmlcssbootstrap-4sass

Tips for combining two htmlelements together

I have two HTML table classes that I refer to as htmlelement and I would like to combine them. This is similar to the following code snippet: var first = document.getElementsByClassName("firstclass") as HTMLCollectionOf<HTMLElement>; var se ...

javascripthtmldom

Place the menu on top of the div by adjusting the z-index

Hey there, I'm working on a project and I need help with an issue. You can check out the example page here: If you try to open the menu and click between "list" and "new ads", you'll notice that you're actually clicking on the dropdown se ...

css

Issue with Bootstrap carousel controls malfunctioning and delayed transition to the next slide

I am facing some difficulties with my carousel. The transition to the next slide is taking longer than usual, and even when I try using the controls, they do not respond no matter how many times I click on them. I have followed all the instructions in the ...

htmlbootstrap-5

Bootstrap tab toggle feature

I'm currently facing an issue with Bootstrap's tab component. I need help figuring out how to hide a lorem ipsum section and show a hidden div when a specific tab is clicked, and then revert the changes when a different tab is selected. $(func ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for creating a flexible popover widget

I am facing an issue with my project that has a popover (ng-bootstrap) similar to what I need. The problem is that the tooltips and popovers are not flexible when it comes to resizing the page. To address this, I attempted to put a mat-grid (which works pe ...

htmlcssangular

instructions on sending the complete product quantity to the payment gateway

I am currently in the process of developing an ecommerce website using Django. When a user clicks on checkout, an HTML billing form appears prompting them to enter their address and email information. Previously, I successfully passed data such as email t ...

htmljsondjangoajaxe-commerce

The functionality of the button seems to be malfunctioning specifically in the Mac Firefox

My button isn't working in Mac Firefox only. Below is the code: <button class="col btn-change"><a href="/p/88" style="color: white;">Landscape</a></button> However, the following two codes are functioning correctly. In the fi ...

cssbootstrap-4

Unlock the navigation tab content and smoothly glide through it in Bootstrap 4

Hey there, I have managed to create two functions that work as intended. While I have some understanding of programming, I lack a background in JavaScript or jQuery. The first function opens a specific tab in the navigation: <script> function homeTa ...

javascripthtmljquerybootstrap-4

Generating a JSon output that contains HTML table data specifically meant to be seen within the fnopen callback function of a jQuery datatable

After spending countless hours searching for a solution to my problem, I decided to take matters into my own hands. The issue at hand revolves around a jQuery datatable that showcases various aspects of a resolver's case load. Claim ID Claimant Nam ...

c#jqueryasp.nethtmljson

Saving HTML elements within an XML file

I am dealing with a String that has an html format containing various html tags. My goal is to enclose this string within xml tags while preserving the html tags, for example: public class XMLfunctions { public final static Document XMLfromString(Str ...

javahtmlxml

Ideas for displaying or hiding columns, organizing rows, and keeping headers fixed in a vast data table using jQuery

My data table is massive, filled with an abundance of information. Firstly, I am looking to implement show/hide columns functionality. However, as the number of columns exceeds 10-12, the performance significantly decreases. To address this issue, I have ...

javascriptjqueryhtmlcssjquery-ui

Sometimes Google Maps API doesn't load properly on my page until I hit the refresh button

Occasionally, I encounter a problem where my Google Map fails to load when the webpage is first opened, resulting in a blank map. However, upon refreshing the page, the map loads correctly. The error message appearing in the Chrome console reads as follow ...

javascripthtmlgoogle-mapsgoogle-maps-api-3google-api