CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
mightybyte
mightybyte

Reputation: 7282

Using a twitter bootstrap dropdown control inside a badge

How do you make a dropdown control work inside a badge with Twitter Bootstrap? Here's what I'm trying to do:

<ul>
 <li>
  <span class="badge badge-success">
   Badge with dropdown
   <span class="dropdown-toggle" data-toggle="dropdown">&gt;&gt;&gt;</span>
   <ul class="dropdown-menu">
    <li>Alpha</li>
    <li>Beta</li>
    <li>Gamma</li>
   </ul>
  </span>
 </li>
</ul>

http://jsfiddle.net/HhqJN/

If you click on the greater than symbols at the end of the badge, it should open the dropdown. But because it's inside a badge, the dropdown menu's style looks horrible. If I try to move the actual menu list outside the badge, then the dropdown doesn't work at all. Is there a way to reset or undo the style set for the badge?

Upvotes: 1

Views: 3143

Answers (1)

SaurabhLP
SaurabhLP

Reputation: 3657

Here's my customization...

Hope this works for you...

Demo:- http://jsfiddle.net/HhqJN/4/

HTML:-

<div class="btn-toolbar btn-custom">

              <div class="btn-group">
                <button class="btn btn-primary dropdown-toggle btn-mini" data-toggle="dropdown">Action <span class="caret"></span></button>
                <ul class="dropdown-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><!-- /btn-group -->
              <div class="btn-group">
                <button class="btn btn-danger dropdown-toggle btn-mini" data-toggle="dropdown">Danger <span class="caret"></span></button>
                <ul class="dropdown-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><!-- /btn-group -->

            </div>

Thanks....

Upvotes: 1

Related Questions