Bootstrap4 make all input-group-addons same width

Question

Is it possible to make all prepend add-ons same width?

i.e in this screenshot I would like Email, License Key 1 & License Key 2 to be the same length, is that possib

Answer 1

So this is actually pretty complicated, because each label is in it's own div and not part of a sibling chain. And afaik, Bootstrap does not support this type of sizing, only relative sizing form classes (which essentially only makes the font bigger). That kind of eliminates most possibilities that I can think of using flex/child properties. However, I think hard-coding is not the right word usage in this circumstance. But the idea is the same.

The example of using min-width is not right in this circumstance because min-width !== width=xx. For example, if you set min-width to 50px, but 1 string of text is longer than that, you still have the same problem as above. Essentially, if you don't want to set them all to one specific value, then your only other option is to use Javascript.

Here is my pure CSS workaround:

.input-group-prepend {
  width : 35%; /*adjust as needed*/
}

.input-group-prepend label {
  width: 100%;
  overflow: hidden;
}

---

Additionally you could use Boostrap specific inline styling classes, but that's arbitrary and one of the issues with Bootstrap (too many inline classes clutter code, and then you would have to manually add it to each element). Just offering it as an alternative

For example:

<div class="input-group-prepend w-50"> /* grows to 50% of parent*/
  <label class="input-group-text w-100" id="licenseEmaillabel"> /* grows to 100% of parent */

Answer 2

Using jquery you could do something like this:

var biggest = Math.max.apply(Math, $('.input-group-text').map(function(){ return $(this).width(); }).get());
$('.input-group-text').width(biggest);

Math.max.apply reads all .input-group-text widths and returns the biggest one. The next line applies this width to all .input-group-text divs.

Sources: jquery-get-max-width-of-child-divs

Answer 3

<div class="form-row">
   <div class="col-md input-group mb-3">
      <div class="input-group-prepend col-5 col-sm-4 col-md-3 col-lg-3 col-xl-2 px-0">
         <span class="input-group-text w-100">Label textx</span>
      </div>
      <input class="form-control" type="text">
   </div>
</div>

This will work! Adjust the col grids accordingly for .input-group-prepend!

Answer 4

Just using the bootstrap classes:

<div class="input-group">
    <div class="input-group-prepend col-3">
        <span class="input-group-text col-12">Name:</span>
    </div>
    <input type="text" class="form-control" placeholder="Name">
</div>
<div class="input-group">
    <div class="input-group-prepend col-3">
        <span class="input-group-text col-12">Address 1:</span>
    </div>
    <input type="text" class="form-control" placeholder="Street Address">
</div>

Looks like this:

Answer 5

add w-50 class to input-group-prepend and add w-100 class to input-group-text

like this

<div class="input-group">
   <div class="input-group-prepend w-50">
     <span class="input-group-text w-100">label</span>
   </div>
   <input type="text" class="form-control " />
</div>