Q:

Bootstrap 4 dropdown item to look like a friend request

I have a bootstrap 4 dropdown which is supposed to contain friend request records. It has an image in the left side, followed by the user's name and then Accept and Reject buttons. I want to make its style like facebook's one. The problem is that when I input different length names, everything becomes messy. If the guy's name is longer, instead of getting on a new line, it sticks on the same line. I tried to describe the problem in the comment below. As you can see on the fiddle: FirstName LastName is longer name than expected but it's not getting on a new line. However word-wrap: break-word didn't work.
<a class="dropdown-item" href="#">
    <!-- Here I want 3 divs.
    1st div: it should contain the image in left side exactly as it is on the fiddle
    2nd div: user's name. If the characters are longer than the div's size it should break the word on a second line.
    3rd div: Accept and Reject buttons
    The final result should be no matter what name you input, it should be getting it on a
    new line instead. When I inspect the page facebook's one has like
    3 parts (boxes) and mine is incredibly bad. 
    -->
</a>

Note: The whole code is on the fiddle!
https://www.bootply.com/A78wFQy1qA

A:

Try this one
You can fix this by adding this css white-space: normal; to your guy's name .
Also Add vertical-align: bottom; this to center the name.
I add a class to your guy's name element . You can check the code.
Here is the working code.

.dropdown-item .user-item {
  white-space: normal;
  vertical-align: bottom;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle mr-lg-2" id="contactsDropdown" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="fa fa-fw fa-bell"></i>
    <span class="d-lg-none">
      Contacts
      <span class="badge badge-pill badge-warning">6 new</span>
    </span>
    <span class="indicator text-warning d-none d-lg-block">
        <i class="fa fa-fw fa-circle"></i>
    </span>
  </a>
  <div class="dropdown-menu dropdown-menu-right" style="min-width: 300px;" aria-labelledby="contactsDropdown">
    <h6 class="dropdown-header">Contacts:</h6>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">
      <img src="https://orig00.deviantart.net/d7b0/f/2011/166/d/4/avatar_100x100_by_demonfox_zephz-d3iyw6a.png" class="rounded-circle" style="width: 50px; height: 50px;">
      <div class="text-left user-item" style="display: inline-block; margin-left: 10px; width: 100px;">
        FirstName LastName
      </div>
      <span class="text-right">
          <input type="button" class="btn btn-primary btn-sm" value="Accept">
          <input type="button" class="btn btn-default btn-sm" value="Reject">
      </span>
    </a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">
      <img src="https://orig00.deviantart.net/d7b0/f/2011/166/d/4/avatar_100x100_by_demonfox_zephz-d3iyw6a.png" class="rounded-circle" style="width: 50px; height: 50px;">
      <div class="text-left user-item" style="display: inline-block; margin-left: 10px; width: 100px;">
        FirstName LastName
      </div>
      <div style="display: inline-block;">
        <input type="button" class="btn btn-primary btn-sm" value="Accept">
        <input type="button" class="btn btn-default btn-sm" value="Reject">
      </div>
    </a>
  </div>
</li>

