How can I vertically align elements in a Bootstrap dropdown list that are unaligned due to different-width icons preceding them?

Question

I have a Bootstrap 4 dropdown menu whose clickable items are made of an icon and a short text next to the icon. I would like to have the icons and the text of all elements aligned. Naturally, I tried to do this with a table. Unfortunately, Bootstrap's dropdown-item class seems to interfere with the table layout, as shown by this JSfiddle:

HTML:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <table class="clickable-rows">
      <tbody>
        <tr class="dropdown-item" data-href="#">
          <th><i class="fa fa-credit-card-alt"></i></th>
          <td>Credit card</td>
        </tr>
        <tr class="dropdown-item" data-href="#">
          <th><i class="fa fa-eur"></i></th>
          <td>Cash</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Javascript:

$( document ).ready(function() {
  $('table.clickable-rows tr').click(function() {
    window.location = $(this).data('href');
  });
});

CSS:

table.clickable-rows td:hover {
  cursor: pointer;
}

This gives me:

Instead of this, I would like to have the Credit card and Cash aligned as indicated by the red line, as well as icons centered within their column. How can I achieve this?

Note: The CSS and JS code are not directly related to the question. They ensure that whole rows behave like a clickable link. I have included them just to show a fully functional example.

Answer 1

The internet has enough say about why not to use <table /> to structure your HTML elements so I'm not going to repeat that here.

Your problem can be easily fixed by setting a fixed width on the icons, or better using FontAwesome's .fa-fw fixed width class. FontAwesome icons are center aligned by default inside the i.fa tag.

No need to set cursor: pointer; CSS, and no need to write JavaScript to get the data-href because the .dropdown-item is now a true anchor tag.

JSFiddle demo: https://jsfiddle.net/davidliang2008/6s18j09L/12/

Live demo...

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown button</button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">
      <i class="fas fa-credit-card fa-fw"></i> Credit card
    </a>
    <a class="dropdown-item" href="#">
      <i class="fas fa-euro-sign fa-fw"></i> Cash
    </a>
  </div>
</div>



<!-- Demo CSS libs -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />

<!-- Demo jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>

Answer 2

The answer is pretty simple and fortunately, as you are using Bootstrap, there is a class called .fa-fw. This class adds consistency and proper spacing to the FontAwesome icons which helps in solving your problem.

Use it in this way: <i class="fa fa-credit-card-alt fa-fw"></i>

Code:

<table class="clickable-rows">
  <tbody>
    <tr class="dropdown-item" data-href="#">
      <th><i class="fa fa-credit-card-alt fa-fw"></i></th>
      <td>Credit card</td>
    </tr>
    <tr class="dropdown-item" data-href="#">
      <th><i class="fa fa-eur fa-fw"></i></th>
      <td>Cash</td>
    </tr>
  </tbody>
</table>

Sandbox link to check: https://codesandbox.io/s/wizardly-beaver-92vrg?file=/index.html

Answer 3

this may also do..

.dropdown-item .fa:before {
    display: inline-block;
    min-width: 35px;
    text-align: center;
}