CODEWITHSUNDEEP
csshtmltwitter-bootstrapdrop-down-menutwitter-bootstrap-3
wolfy1339
wolfy1339

Reputation: 814

Making a multi-column dropdown menu from a button

I am trying to make a multi-column (specifically 2 columns) dropdown menu from a button.
I have tried using the Upgrade Bootstrap 2 HTML to Bootstrap 3 tool, and it doesn't fix anything but some .btn to .btn.btn-default stuff, which is fine. The code was originally written in bootstrap 2.3.2, here is what it looks like normally:

Bootstrap 2 Dropdown menu

And under bootstrap 3 it looks like this:

Bootstrap 3 Dropdown menu

Here is the code i have:

<div class="btn-group">
<a class="btn btn-lg btn-success dropdown-toggle" data-toggle="dropdown" href="#">   Download
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<div class="btn-group btn-group-vertical">
<a class="btn btn-success" href="#">Windows 32-bit</a>
<a class="btn btn-default" href="#">Windows 64-bit</a>
</div>
<div class="btn-group btn-group-vertical">
<a class="btn btn-default" href="#">Linux 32-bit</a>
<a class="btn btn-default" href="#">Linux 64-bit</a>
</div>
</ul>
</div>

I have also checked out other posts on here before posting but none of them worked as I wanted it to work, or not work at all.

Upvotes: 1

Views: 1654

Answers (1)

mohamedrias
mohamedrias

Reputation: 18576

enter image description here

This will make it float properly

.dropdown-menu {
  min-width: 260px;
  }

.btn-group-vertical {
    float: left;
    width: 46%;
    margin-right: 10px;
}

DEMO

Upvotes: 2

Related Questions