Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap: dropdown vs button dropdown

In the Bootstrap documentation, there seems to be two different ways to create a dropdown:

  • .dropdown
  • .btn-group

The first is as follows:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    ...
  </ul>
</div>

The second is as follows:

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  Dropdown 
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Is one way preferred over the other?

like image 385
Tianxiang Xiong Avatar asked Feb 01 '16 00:02

Tianxiang Xiong


People also ask

Is a dropdown a button?

A dropdown button lets the user select from a number of items. The button shows the currently selected item as well as an arrow that opens a menu for selecting another item.

What is a Bootstrap dropdown?

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is an intentional design decision.

Is it drop-down or dropdown?

Should I use "drop-down menu" or "dropdown menu" in writing? When writing documentation or describing a drop-down menu, use "drop-down menu" unless you're describing a function, option, or command with no hyphen.

How can I create multiple dropdowns in Bootstrap?

No, it's not possible to have two dropdown menus inside the same div . They need to be separated since the code to toggle them looks for the first element in the parent div of the button/anchor. So if they are in the same parent div only the first will be toggled.


1 Answers

They are basically the same, the use of btn group is to ensure that you can get the buttons on a single line with either another button or another form element.

like image 116
jsg Avatar answered Sep 23 '22 04:09

jsg