bootstrap input group sizing

Question

I have a series of bootstrap 4 input groups and would like them to be of the same size. In the docs , they add classes like input-group-sm or input-group-lg and even though the text sizes are changed, the overall width of the input group stays the same.

That doesn't work for me:

Fiddle: https://jsfiddle.net/efx7rp4n/

Source:

<div class="container">

  <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">Long descriptive text:</span>
      </div>
      <div class="input-group-text">
        <input type="checkbox" aria-label="Checkbox for following text input">
      </div>
    </div>

    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">Short:</span>
      </div>
      <div class="input-group-text">
        <input type="checkbox" aria-label="Checkbox for following text input">
      </div>
    </div>
</div>

How can I force my input groups to be of the same width ?

As this is bootstrap, there are of course tons of related questions. This one Bootstrap input group sizes recommends adding size=50 as attribute. No effect for me.

This one Bootstrap input group field not sizing correctly looked very similar to my problem. But I already tried adding a fixed width over css, it only makes it worse, <div class="input-group mb-3" style="width:150px"> leads to:

Answer 1

You can add a column width class to your inputs.

For instance, <input type="text" class="col-4">

Answer 2

Try something like this:

<div class="input-group mb-3">
<div class="input-group-prepend flex-colunm col-4">
    <label class="input-group-text flex-fill ">{{ field.label }}</label>
</div>
{{ field }}
</div>