I am currently using Bootstrap 4.1 and I have a Navbar that triggers a Modal Dialog Box with tabs and a drop down menu containing an image icon. My goal is to make the "caret" or down arrow of the drop down menu appear on the right side of the image.
To achieve this, I have created a custom class for the dropdown-toggle class. Despite trying various settings for that class, I haven't been able to get it to work as desired. Here is the custom class:
.dropdown-toggle { align-content: center; }
For the full code sample, you can view it on JSFiddle here: https://jsfiddle.net/tsmolskow/aq9Laaew/254602/
Below is the portion of the code related to the Modal Dialog Box:
<div tabindex="-1" class="modal fade" id="MyNNSModal" role="dialog" aria-hidden="true" aria-labelledby="exampleModalLabel">
<div class="modal-dialog modal-lg" role="document">
...
</div>Here is the custom CSS being used:
.modal-header {
background: #4a4a4a;
...
}