Using Span for Triggering Bootstrap Dropdown

Question

I have several icons in the header that is used from a font and wrapped with

<li style="margin-top: 15px">
    <span class="myIcons" id="messages" style="font-size: 5px">m</span>
</li>

I want to use it to trigger bootstrap dropdown however in its documentation, it uses button and div and, I couldn't figure out how to trigger it when clicked on the font.

Should I try using jquery and try to trigger the dropdown to open on click on #messages?

davidkonrad · Accepted Answer · 2015-10-03 07:47:25Z

4

You do not have to use <button>'s and <div>'s - the important thing is to have a data-toggle="dropdown" on the triggering element :

<ul class="dropdown">  

  <!-- your markup -->  
  <li style="margin-top: 15px" data-toggle="dropdown">
      <span class="myIcons" id="messages" style="font-size:5px">m</span>
  </li>
  <!--// your markup -->      

  <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><a href="#">Separated link</a></li>
  </ul>
</ul>

demo -> http://jsfiddle.net/7ujpzs58/

answered Oct 3, 2015 at 7:47

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using Span for Triggering Bootstrap Dropdown

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related