CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Reed
Reed

Reputation: 1642

bootstrap dropdown ::after pseudo-element align right

I am currently using btn-block on my .dropdown-toggle button to make it the full width.

However, I don't like how the ::after pseudo element only sits a fixed width away from the button content.

I am weak with psuedo element styling but is there a way that I can get the dropdown arrow to 'float' and be aligned a fixed width from the right side of the dropdown?

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Upvotes: 1

Views: 1716

Answers (1)

jleggio
jleggio

Reputation: 1286

You can make the :after element position: absolute; and align it to the right like so...

.dropdown-toggle::after {
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -5px;
}

The top and margin-top elements are to help vertically align the arrow no matter the height of the dropdown.

Upvotes: 5

Related Questions