Bootstrap 4 Dropdown dropdown-item with link on left and button on the right-CodePudding

I am using bootstrap 4 and using a dropdown.

I need to have a list where the list item text / anchor is as usual...on the left and on the same line on each have a button on the right

This is what I've done but it's not right. Here's the current code:

 <div >
    <div >
       <div ><a href="#">Item 1</a></div>
       <div >
          <button ><img  src="button1.png" alt="" /></button>
       </div>
    </div>
    <div >
       <div ><a href="#">Item 2</a></div>
       <div >
          <button ><img  src="button2.png" alt="" /></button>
       </div>
    </div>
 </div>

How is this done the correct way in Bootstrap 4?

CodePudding user response：

You don't need floats for this (floats shouldn't be used with flex in general). Just use the proper flex properties on the item element, and remove horizontal padding.

You can probably simplify further by removing the divs from around the anchors and buttons. I've done so in the second item to demonstrate.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div >
  <button  type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>

  <div >
    <div >
      <div><a href="#">Item 1</a></div>

      <div >
        <button type="button" >Primary</button>
      </div>
    </div>

    <div >
      <a href="#">Item 2</a>
      <button type="button" >Primary</button>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

CodePudding user response：

Here you go...

See the snippet below. Let me know if this is helpful.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>

<div >
  <button  type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div >
    <div >
      <div ><a href="#">Item 1</a></div>
      <div >
        <button type="button" >Primary</button>
      </div>
    </div>
    <div >
      <div ><a href="#">Item 2</a></div>
      <div >
        <button type="button" >Primary</button>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

"bad" styling aside with the floats what is missing is the button at the top and the "dropdown" wrapper.

<div >
    <button  type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
    </button>

I also added text to the image alt="item1" so you could actually see something (a good practice generally)

Please see the first example in the reference: https://getbootstrap.com/docs/4.6/components/dropdowns/

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div >
  <button  type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div >
    <div >
      <div ><a href="#">Item 1</a></div>
      <div >
        <button ><img  src="button1.png" alt="item1" /></button>
      </div>
    </div>
    <div >
      <div ><a href="#">Item 2</a></div>
      <div >
        <button ><img  src="button2.png" alt="item2" /></button>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>