Skip to content
This repository has been archived by the owner on Feb 1, 2022. It is now read-only.

E036

Jump to bottom
Chris Rebert edited this page Jan 7, 2015 · 4 revisions

E036

.input-group-btn should only ever contain one .dropdown-menu and one non-dropdown-toggling .btn.

Using multiple buttons and/or multiple dropdown menus is currently unsupported due to the heavy CSS overrides it would require.

Wrong:

<div class="input-group">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default" tabindex="-1">Action</button>
    <button type="button" class="btn btn-default" tabindex="-1">Second Action</button>
  </div>
  ...
</div>

<div class="input-group">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default" tabindex="-1">Action</button>
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
      <span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
      <span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>
  ...
</div>

Right:

<div class="input-group">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default" tabindex="-1">Action</button>
  </div>
  ...
</div>

<div class="input-group">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default" tabindex="-1">Action</button>
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
      <span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>
  ...
</div>

Bootlint documentation wiki content is licensed under the CC BY 3.0 License, and based on Bootstrap's docs which are copyright Twitter, Inc.

Clone this wiki locally