dropdown align dropdown-toggle right

user_5797253 0
Viewed 11747

How can i right align the dropdown-toggle in the bootstrap dropdown? here's my code and a jsfiddle, you can see the arrow pointing down is besides the text, i want it on the right.

https://jsfiddle.net/9a83n353/

<div class="dropdown">
    <button class="btn dropdown-toggle btn-block text-left" style="background-color: white; border-color:#dee4ed" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Active</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item">Active</a>
        <a class="dropdown-item">Inactive</a>
    </div>
</div>
bootstrap-4 css html
3 Answers

Use CSS to rotate the arrow:

.dropdown-toggle::after {
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
}

Add CSS float to right align:

float:right;
user_46247190
user_55616050

You can just add a float right to the .dropdown-toggle::after. It looks something like this:

.dropdown-toggle::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .3em;
    vertical-align: middle;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-left: .3em solid transparent;
    float: right;
    margin-top: 8px;
}
user_55152750
Related