Bootstrap input-group-prepend/addon width adjustment

Question

I'm having issues making prepend add-ons the same width. I'm using Font Awesome icons and the prepend is sized to each specific icon. I found another thread from about a year ago describing my exact problem, but there wasn't an answer.

Bootstrap4 make all input-group-addons same width

Here's a screenshot of my issue:

I tried using various CSS tweaks with no luck, including the one provided in that aforementioned thread.

Relevant HTML:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row body-main-bg">
  <div class="col-sm-4 my-3">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">
                                <span class="fa fa-user"></span>
        </span>
      </div>
      <input type="text" class="form-control" placeholder="Name">
    </div>
  </div>
</div>
<div class="row body-main-bg">
  <div class="col-sm-4 mb-3">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">
                                <span class="fa fa-envelope"></span>
        </span>
      </div>
      <input type="text" class="form-control" placeholder="Email">
    </div>
  </div>
</div>
<div class="row body-main-bg">
  <div class="col-sm-4 mb-3">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">
                                <span class="fa fa-ellipsis-v"></span>
        </span>
      </div>
      <input type="text" class="form-control" placeholder="Subject">
    </div>
  </div>
</div>
<div class="row body-main-bg">
  <div class="col-sm-4 mb-3">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">
                                <span class="fa fa-pencil"></span>
        </span>
      </div>
      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Message"></textarea>
    </div>
  </div>
</div>

Answer 1

I tried your same code snippet, with just some css tweaks it works for me. I just added the following css, Please use this css, this will solve your prepend/addon width issue.

.input-group-text {
    width: 40px;
}
.input-group-text span {
    margin: 0 auto;
}

Here is also the url to the snippet as well, bootstrap-input-group-prepend-addon-width-issue