Bootstrap dropdown not workin properly

i have the following html

<link target="_blank" rel="nofollow" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<tr>
<td class="text-center">
        <button type="button" data-toggle="dropdown" class="btn btn-warning dropdown-toggle" aria-expanded="false">
        <i class="fa fa-phone" aria-hidden="true"></i>
        <div style="background-color:white;width:0.5em;display:inline-block;"></div>
        <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right">                                                                      <li><a target="_blank" rel="nofollow" href=""><i class="fa fa-eye"></i> Vizualizeaza</a></li>
        <li><a target="_blank" rel="nofollow" href=""><i class="fa fa-plus"></i> Adauga</a></li>
        </ul>
</td>
</tr>

what i’m trying to do is to make a dropdown, but i have two problems, first one, the div in the middle of the button won’t display (i need to make a white delimitation, i don’t know if this is the right way i’m trying)

and second, this html it inside a loop and when i click the button, the dropdown opens at the end of the table

You need to add dropdown class for making the dropdown to work as follows

<tr>
   <td class="text-center">
      <div class="dropdown">
         <button type="button" data-toggle="dropdown" class="btn btn-warning dropdown-toggle" aria-expanded="false">
            <i class="fa fa-phone" aria-hidden="true"></i>
            <div style="background-color:white;width:0.5em;display:inline-block;"></div>
            <span class="caret"></span>
         </button>
         <ul class="dropdown-menu dropdown-menu-right">
            <li><a target="_blank" rel="nofollow" href=""><i class="fa fa-eye"></i> Vizualizeaza</a></li>
            <li><a target="_blank" rel="nofollow" href=""><i class="fa fa-plus"></i> Adauga</a></li>
         </ul>
      </div>
   </td>
</tr>

And for making the div visible specify height property as well

<div style="background-color:white;width:0.5em;display:inline-block;"></div>

Hope this works

I think I have an idea of what you’re trying to accomplish. All of the code to do this can be found on bootstrap’s website. That link will direct you to how to create dropdown buttons in bootstrap 3. Additionally, here’s a link to a codeply project with the code in action.

    <tr>
        <td>
            <div class="btn-group">
                <button type="button" class="btn btn-warning"><i class="fa fa-phone"></i></button>
                <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu">
                    <li><a target="_blank" rel="nofollow" href="#"><i class="fa fa-eye"></i> Vizualizeaza</a></li>
                    <li><a target="_blank" rel="nofollow" href="#"><i class="fa fa-plus"></i> Adauga</a></li>
                </ul>
            </div>
        </td>
    </tr>

WORKING EXAMPLE ! Please wrap Button and ul inside a div.”‘div class=”btn-group”>'”, This should resolve your problem.

<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" target="_blank" rel="nofollow" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>

    <div class="container">
      <h2>Basic Table</h2>
      <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>            
      <table class="table">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <tr>
    <td class="text-center">
    <div class="btn-group">
            <button type="button" data-toggle="dropdown" class="btn btn-warning dropdown-toggle" aria-expanded="false">
            <i class="fa fa-phone" aria-hidden="true">Button click</i>
            <div style="background-color:white;width:0.5em;display:inline-block;"></div>
            <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu"><li><a target="_blank" rel="nofollow" href=""><i class="fa fa-eye"></i> Vizualizeaza</a></li>
            <li><a target="_blank" rel="nofollow" href=""><i class="fa fa-plus"></i> Adauga</a></li>
            </ul>
    </div>
    </td>
    </tr>
          </tr>
        </tbody>
      </table>
    </div>

    </body>
    </html>

Basically, You should wrap button and ul inside a div with below properties.

position: relative;
display: inline-block;
vertical-align: middle;

Or you can use bootstrap class “btn-group”