Bootstrap 5 dropdown menu with buttons in ul li on the right (inline)-CodePudding

I am using Bootstrap 5 and I have this example:

As you can see I'm trying to add some buttons to the LI:

<div >
  <button  type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul  aria-labelledby="dropdownMenuButton1">
    <li><a  href="#">Something here</a><button>A</button><button>B</button><button>C</button></li>
  </ul>
</div>

I want to have them inline on the right.

How can I do this?

CodePudding user response：

You can use Flex layout for that: https://getbootstrap.com/docs/5.0/utilities/flex/

Try this code ?

<div >
  <button  type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul  aria-labelledby="dropdownMenuButton1">
    <li >
      <a  href="#">Something here</a>
      <button >A</button>
      <button >B</button>
      <button >C</button>
    </li>
  </ul>
</div>

CodePudding user response：

Edit : consider using flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

<li >
  <a  href="#">Something here</a>
  <div>
     <button>A</button>
     <button>B</button>
     <button>C</button>
  </div>
</li>