CODEWITHSUNDEEP
csstwitter-bootstrap
Robert
Robert

Reputation: 135

How to add element to Bootstrap Dropdown list item

I'm trying to add a div to each item in a Dropdown, however the item looses the bootstrap styling.

CSS

.ul.dropdown-menu li {
    display: inline-block !important;
}

HTML

<li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown">Example 2<span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li>
            <div>
                <a>Item One</a>
                <div>
                    <i class="material-icons " style="font-size:18px">more_horiz</i>
                </div>
            </div>
        </li>
    </ul>
</li>

I've created examples of the dropdown before and after the additional element to demonstrate the issue. https://jsfiddle.net/Rob_H/nqu621vm/

Upvotes: 0

Views: 741

Answers (2)

MHD Alaa Alhaj
MHD Alaa Alhaj

Reputation: 3213

Because bootstrap has a styles for .dropdown-menu>li>a but not for .dropdown-menu>li>div so you have to copy the needed styles from bootstrap dropdown and customize it for your needs.

Check the updated JSfiddle.

Hope this helps.

Upvotes: 1

Ahmer
Ahmer

Reputation: 94

For continue same style they need a tag as root otherwise you can enhance css

        <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown">Example 2
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li>
      <a>
       <div>
         Item One
         <div>
          <i class="material-icons " style="font-size:18px">more_horiz</i>
          </div>
          </div></a>  
        </li>

         <li>
         <a>
       <div>
         Item One
         <div>
          <i class="material-icons " style="font-size:18px">more_horiz</i>
          </div>
          </div></a>  
        </li>
        </ul>
  </li>

Upvotes: 1

Related Questions