Creating a multi-column dropdown menu: options for two, three, or multiple columns

Is there a way to implement multiple columns in a dropdown menu using the grid system in Bootstrap 4?

Here is the code I have tried so far, but it's not working as expected (please note that the snippet is mobile-responsive)

<!DOCTYPE html>
<html>
<head>
<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>
  <title></title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <div class="container">
            <div class="row">
              <div class="col-6">
                <h6 class="dropdown-header">Header</h6>
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
              <div class="col-6">
                <h6 class="dropdown-header">Header</h6>
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>

  </div>
</nav>

</body>
</html>

htmlcssbootstrap-4

Answer №1

You might want to consider adjusting the classes to have two to three columns instead

.dropdown-menu .drop {
  min-width: 400px
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js></script>

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="dropdown my-3">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown Menu With 2 Columns
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <div class="row">
      <div class="col-6">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
      <div class="col-6">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>
  </div>
</div>


<div class="dropdown my-3">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown Menu with 3 Columns
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <div class="row">
      <div class="col-4">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
      <div class="col-4">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
      <div class="col-4">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>
  </div>
</div>


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu drop" aria-labelledby="navbarDropdown">
          <div class="row">
            <div class="col-6">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
            <div class="col-6">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</nav>

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

There seems to be an issue with d3js bar charts as they are not displaying on the screen and there

Recently, I started delving into the world of D3js and decided to try my hand at creating some bar charts. However, despite my efforts, the bar charts failed to display on the screen. <!DOCTYPE HTML> <html> <head> <title> My D3 Pra ...

javascripthtmlcssd3.js

Is it possible to generate a table without any grid lines present?

Currently, I am in the process of designing a table that will function as a popup when a link is clicked within my imported SQL table. An example of this table is included with this message for reference. After conducting thorough research, I attempted to ...

htmlcssbootstrap-4bootstrap-modal

Creating a display of divs that flow from left to right in each row, and then stacking the rows from bottom to top using CSS and jQuery

My current dilemma involves a collection of divs that must be displayed in a specific order, but with a rather intricate layout. Essentially, this is the structure of my HTML: <div> <div class="box">1 (first in list)</div> <di ...

javascriptjqueryhtmlcss

Unable to apply styling to body element in style.css file when using Node.js

I recently launched a basic Node.js website but encountered an unusual issue. When trying to style the body using the default style.css stylesheet provided by Express, I found that it was not recognizing it. The only workaround was to add the class body di ...

htmlcssnode.jsexpressmean-stack

Using JavaScript to dynamically alter the background image of an HTML document from a selection of filenames

Just starting out with JavaScript and working on a simple project. My goal is to have the background image of an HTML document change to a random picture from a directory named 'Background' every time the page is opened. function main() { // ...

javascripthtmlcssfilebackground

Strangely behaving animated mobile navigation glitch

CodePen showcasing the mobile navigation Upon initial interaction with the mobile navigation, it operates as expected. However, a bug arises with subsequent interactions. The navigation either opens and closes instantly or the links appear in a jumbled or ...

javascriptcssanimationnavigation

What are some tactics for avoiding movement in the presence of a border setting?

I created a webpage that has the following structure: .topbar-container { width: 100%; position: fixed; top: 0; background-color: #2d3e50; z-index: 999; display: flex; transition: height 500ms; } @media (min-width: 992px) { .topbar-cont ...

javascripthtmlcss

Display a message indicating unavailability when no events are scheduled and adjust the background color in FullCalendar

In one of my projects, I am utilizing jQuery FullCalendar to schedule appointments for doctors. The doctors should be able to specify their availability between 9 AM - 5 PM on weekdays. If this is not set, the background color of the spans of time not boo ...

jquerycssfullcalendar

Google Chrome extension with Autofocus functionality

I developed a user-friendly Chrome extension that allows users to search using a simple form. Upon opening the extension, I noticed that there is no default focus on the form, requiring an additional click from the user. The intended behavior is for the ...

javascripthtmlgoogle-chromegoogle-chrome-extension

.htaccess file is causing js and css files to not load

I followed an MVC tutorial by howcode on YouTube, but I encountered an issue where my CSS and JS files were not loading due to the htaccess configuration. .htaccess file: RewriteEngine On RewriteRule ^([^/]+)/? index.php?url=$1 [L,QSA] I attempted vario ...

javascriptphpcssapache.htaccess

What is the best way to ensure that a <label> remains vertically aligned with its <form>?

I'm struggling to incorporate their suggestions into my design. How can I align my label to the left of my input field on the same line? Also, I'm a beginner in coding so please excuse any mistakes in my code: body { background-color: #f5f ...

htmlcssbootstrap-4

The functionality of the button in my script is limited to a single use

Below is a simple code snippet that I wrote: HTML & CSS: <!DOCTYPE html> <html> <head> <title> JavaScript Console </title> <style> button { text-align:center; ...

javascripthtmlcss

Hover to reveal stunning visuals

Can anyone help me figure out how to change the color of an image when hovered over using HTML or CSS? I have a set of social network icons that I want to incorporate into my website, and I'd like the icon colors to change when the mouse moves over th ...

htmlcsshovermousehover

Tips for altering the appearance of a button:

Upon clicking the subscribe button and successfully subscribing, I want to display an unsubscribe option in my code. To achieve this, I have created two separate divs for each button, thinking that we could toggle between them. <div id ="subscribe_ever ...

javascriptjqueryhtmlcss

Arrange an item independently of surrounding elements

Is it possible to position an element across two columns, starting in the middle of the second column? The columns are defined by divs. Could this be achieved through z-index positioning? ...

css

Can a sophisticated matrix-like design be created using a CSS grid system?

I'm currently working on implementing a unique grid structure in Material-UI using a CSS grid: Browse the desired complex layout here Here's the current CSS grid layout I've created with Material-UI: View the existing layout here This is ...

htmlcssmaterial-uicss-grid

Guide to updating the background color of an element with AngularJs when clicked

I've used AngularJS's ng-repeat to display a list of <div> elements. When I select one <div> (div1), its background color changes to blue. If I then click on another <div> (div2), div1's background returns to white and div ...

htmlcssangularjsangularjs-ng-repeatonfocus

HTML displaying inaccurately

While following a Ruby tutorial to create a Sample App, I encountered an issue with the signup page. The errors displayed during sign up are not formatted correctly - the period at the end of the error line appears before it, and both the asterisk and bull ...

htmlcssrendering

Achieving equal alignment of items with flexbox

As someone who is just starting to learn about HTML and CSS, I have been working on creating toggle buttons that I want to align dynamically in the center of the screen. I recently discovered flexbox which has made this process easier for me. However, one ...

htmlcssflexbox

When the window is resized, the nested div parent and child are overlapping

Is there a way to fix the issue of the content div overlapping the logo div when resizing the browser window? I would like the logo to resize along with the window. @charset "utf-8"; /* CSS Document */ html, body { background-color:#ffffff; mar ...

cssresizeoverlappinghtml