Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

dropdown align dropdown-toggle right

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>
like image 796
crimson589 Avatar asked Oct 05 '17 07:10

crimson589


People also ask

How do I align a drop down to the right?

Use the w3-right class to float the dropdown to the right, and use CSS to position the dropdown content (right:0 will make the dropdown menu go from right to left).

How do I toggle a drop down menu?

dropdown class indicates a dropdown menu. To open the dropdown menu, use a button or a link with a class of . dropdown-toggle and the data-toggle="dropdown" attribute.

How do I change the position of a drop down menu in Bootstrap?

pull-right on dropdown menus. To right-align a menu, use . dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu.

What is dropdown toggle in Bootstrap?

Overview. Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is an intentional design decision.


1 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;
like image 108
heady12 Avatar answered Oct 15 '22 14:10

heady12