CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
curious1
curious1

Reputation: 14717

Bootstrap: how to make dropdown button look like other text and aligned with other text

I have the following HTML, which is a list of menu items on a line:

<ul>
    <li>Item 1</li>
    <li>
        <div class="btn-group">
          <a type="button" class="btn btn-default" data-toggle="dropdown">Item 2</a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action 1</a></li>
            <li><a href="#">Action 2</a></li>
          </ul>
        </div>
    </li>
    <li>
        Item 3
    </li>
<ul>

I need to make sure the dropdown button text "Item 2" look just like other text in terms font size, font-family, alignment vertically, and background-color. Here is what I did so far (jsfiddle demo: http://jsfiddle.net/mddc/23ab8d9u/4/)

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: pink;
}

ul li {
    display: inline-block; /*this cannot be changed in my project*/
}

.btn-group .btn {
    padding:0;
    margin:0;
    border-width: 0;
    font-size: initial  !important;
    text-shadow: none !important;
    background-color:inherit !important;
    font-size: inherit !important;
    line-height: initial !important;
}

I can see that the button text "Item 2" is NOT vertically aligned with "Item 1" or "Item 3". How can I fix this? Besides, please feel free to let me know whether the above .btn customization is enough or correct.

Thanks and regards.

Upvotes: 2

Views: 937

Answers (1)

Devin
Devin

Reputation: 7720

you're pretty close, but the last part is not on that .btn element, but the containing element, so just add this to your CSS:

.btn-group, .btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: text-bottom;
}

the text-bottom property will align all the <LI> elements by their bottom extreme providing you a perfect alignment.

See forked fiddle here

Upvotes: 2

Related Questions