Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to customize dropdowns with Bootstrap 5.

Dropleft

We can add the dropleft class to make the menu show on the left.

The arrow will also be pointed to the left.

For example, we can write:

<div class="btn-group dropleft">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
    button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">foo</a></li>
    <li><a class="dropdown-item" href="#">bar</a></li>
    <li><a class="dropdown-item" href="#">baz</a></li>
  </ul>
</div>

We add the dropleft class to the outer div to make the arrow show to the left of the button.

Also, the menu will be displayed to the left of the button.

With a split button, we’ve to put the arrow on the right instead of the left:

<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <button type="button" class="btn btn-secondary">
    Split
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">foo</a></li>
    <li><a class="dropdown-item" href="#">bar</a></li>
    <li><a class="dropdown-item" href="#">baz</a></li>
  </ul>
</div>

#bootstrap #css #javascript #web-development #developer