CODEWITHSUNDEEP
drop-down-menutwitter-bootstrap-3caret
Franckl
Franckl

Reputation: 1491

twitter bootstrap issue : Right align the caret in the dropdown header

I have an issue with the right alignment of the caret. Using .pull-right in the span makes it go to the top right corner.

How can I make it vertically centered again ? I also would like to align the text to the left

http://www.bootply.com/r8x7g5Bw5R

                    <div class="btn-group cust-dropdown">
                    <button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown"><span class="caret pull-right"></span><span>test</span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">test</a></li>
                        <li><a href="#">tes2</a></li>
                        <li><a href="#">test3</a></li>
                    </ul>
                </div>

and the CSS

.cust-dropdown {
width: 200px;}

Upvotes: 23

Views: 27984

Answers (3)

pjs
pjs

Reputation: 2731

A much simpler solution exists for this problem. This style should look the most natural and be the most responsive to all usages as it does not depend on any predetermined layout (other than default bootstrap styles).

.dropdown > .btn > .caret {
  float: right;
  margin: 6px 0;
  // if you are using Less, the you can reuse the actual vertical padding
  // margin: @padding-base-vertical 0;
}

Upvotes: 13

FiveTools
FiveTools

Reputation: 6030

.caret {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #fff;
    left: 90%;
    top: 45%;
    position: absolute;
}

Using position absolute and a percentage top and left I was able to right align my caret within the dropdown. Works in Chrome, IE, and FF.

EDIT

Previous code will work but changes the style of the caret. If you just want to reposition it maintaining its style, just extend Bootstrap's .caret class:

.caret {
    position: absolute;
    left: 90%;
    top: 45%;
}

Upvotes: 29

Hristo Georgiev
Hristo Georgiev

Reputation: 2519

Just interchange the caret and span blocks in HTML:

HTML

   <div class="btn-group cust-dropdown">
                <button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown"><span id= "titl">test</span><span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">test</a></li>
                    <li><a href="#">test 2</a></li>
                    <li><a href="#">test 3</a></li>
                </ul>
            </div>

CSS

  .cust-dropdown {
        width: 200px;
    }

    #titl {

      padding-right: 10px;
    }

You can align the text more to the left by adding more padding-right.

Upvotes: -4

Related Questions