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:

 /* grows to 50% of parent*/
   /* grows to 100% of parent */