Bootstrap 4 Dropdown - align dropdown caret right

1

Anyone know how to get the Bootstrap 4 Dropdown to have a right aligned caret?

2

Add dropleft to the class property.

3

CaretRight

I didn’t explain it well. I am looking to have the dropdown consume the available width, which I have, but then, have the caret aligned over to the right. See screenshot. I will keep looking …

4

Sorry! I don’t see anything in the Bootstrap docs to do this. I’m sure there’s a way to hack this to happen, though.

5

Took me ages to find out, but this is how I do it:

.dropdown-toggle {   
    overflow: hidden !important;
    white-Space: nowrap !important;
    padding-Right: 12px !important; /* Optional For caret */
    text-align: Right !important;
    text-overflow: ellipsis !important;    
    width: 100%;
    border-color: transparent !important;
    background-color: #7da7ca !important;  
}

/* Optional For caret */
.dropdown-toggle .caret {
    position: absolute;
    Right: 6px;
    top: calc(50% - 2px);
}

.customdropdown {
width: 44.5% !important;
max-width: 350px !important;
Right: 3% !important;
}
1 Like
6

This would be put into Project CSS.

7

Thank you both so much.

silvercoder - I’m glad to see I’m not alone. I don’t get how Bootstrap made this hard. It should be the default. I don’t get it. But, I will try this. Enormous thank you.

8

Unfortunately for me that aligns the caret to the right, but it also aligns the text to the right.

I’m sure there is a way to wrangle it, but that’s not yet working as I was trying to achieve.

In advance of bootstrap, just about every dropdown list rendering on the planet used a left text aligned list with the caret aligned over to the right. I don’t get how this is not the default behavior in bootstrap.

And yet - it Is the standard behavior with - a Select. Which I think I am now switching over to.

9

Sometimes if what I want to do isn’t in Bootstrap (or the myriad of tweaks to it in StackOverflow), I ask myself if there’s a reason. Is what I’m trying to do perhaps not a good pattern?

It could be argued that this is the case here. On a wide screen, this visual effect isn’t great. Maybe there’s a better UI for this?

10

I know this is a very late reply, but I did it using this simple CSS below:

.dropdown-toggle::after {
   float:right;
}

You can also add to the above margin-right and margin-top if you need to pad it away from the edge of the container it’s in, so I used margin-right:10% when I used it but the world is your oyster.

11

Thanks for following up on this!

12

Thank you.