Bootstrap4 Make All Input-Group-Addons Same Width

Bootstrap4 make all input-group-addons same width

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 */

Bootstrap input-group-prepend/addon width adjustment

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;}

Bootstrap 4 set a width of input-group inputs

I found a solution. I tried set max-width instead of only width and it works.
For the above example it would be:

#preselection {  max-width: 15%;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 <div class="form-group">    <label for="telephone">Telephone</label>      <div class="row">         <div class="col-12">            <div class="input-group telephone-input">              <div class="input-group-prepend preselection-prepend">                  <div class="input-group-text">+</div>              </div>              <input class="form-control" id="preselection" type="text" maxlength="3" name="preselection" placeholder="Preselection" autocomplete="off" required>              <input class="form-control" id="telephone" placeholder="Telephone number" type="tel" maxlength="11" name="telephone" autocomplete="off" required>              <span class="placeholder" id="tele-holder"></span>              <div class="input-group-append" id="preselectionToggle">              <div class="input-group-text">                 <i class="far fa-plus-square"></i>              </div>            </div>          </div>       </div>     </div>  </div>    <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>

Make Bootstrap input group full width

According to bootstrap example you need to add input-group-btn element.

For Example.

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <select class="form-control">
      <option selected="">seconds</option>
      <option>minutes</option>
      <option>hours</option>
      <option>days</option>
      <option>weeks</option>
    </select>
  </div>
</div>

Fiddle here

How to decrease the size of input-group-addon Bootstrap

Check this snippet,

.form-control.timepicker {  height: 100px; /* Sample height */}.input-group {  position: relative;  padding-left: 50px;}.input-group-addon {  position: absolute;  top: 50%;  left: 0;  -webkit-transform: translateY(-50%);  -moz-transform: translateY(-50%);  -ms-transform: translateY(-50%);  transform: translateY(-50%);  width: 50px !important;  height: 30px;  display: block;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><div class="input-group">  <span class="input-group-addon" id="basic-addon1">@</span>  <input type="text" class="form-control timepicker" placeholder="Username" aria-describedby="basic-addon1"></div>

Bootstrap4 input-group-addon issue

The classes have changed in the latest 4.0.0...

https://www.codeply.com/go/EnCJUbqs0g

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" /><form>  <div class="form-group">    <div class="input-group input-group-lg">      <div class="input-group-prepend"><i class="input-group-text fa fa-user"></i></div>      <input type="text" class="form-control" placeholder="Name">    </div>  </div>  <div class="form-group">    <div class="input-group input-group-lg">      <span class="input-group-prepend"><i class="input-group-text fa fa-envelope"></i></span>      <input type="email" class="form-control" placeholder="Email">    </div>  </div>  <div class="form-group">    <div class="input-group input-group-lg">      <span class="input-group-prepend"><i class="input-group-text fa fa-pencil"></i></span>      <textarea class="form-control" placeholder="Message" rows="5"></textarea>    </div>  </div>  <input type="submit" value="Submit" class="btn btn-primary btn-block btn-lg"></form>

Bootstrap 4.0 input-group-append and prepend show wrong height

I think your problem is that the width of the elements inside the columns don't fit on they, so they break on multiples lines. If you add some border classes you will notice this. Check the next example, where I have reduced the classes needed for your original approach (showing the issue):

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<hr/>

<div class="container-fluid">
<div class="row">

  <div class="col-4">
  <div class="row">

    <div class="input-group input-group-sm mb-3 col-md-6 border border-danger">
      <div class="input-group-prepend">
        <span class="input-group-text" id="testPot">Potencia</span>
      </div>
      <select class="custom-select custom-select-sm form-control">
        <option value="value">text</option>
      </select>
    </div>

    <div class="input-group input-group-sm mb-3 col border border-info">
      <input type="text" class="form-control">
      <div class="input-group-append">
        <span class="input-group-text">KVA</span>
      </div>
    </div>

    <div class="input-group input-group-sm mb-3 col border border-danger">
      <div class="input-group-prepend">
        <span class="input-group-text">Y</span>
      </div>
      <input type="text" class="form-control" name="name" value="" />
      <div class="input-group-append">
        <span class="input-group-text">KVA</span>
      </div>
    </div>

  </div>
  </div>

</div>
</div>

<hr/>

how to format bootstrap input form - all labels with the same width

This should do the trick:

  .input-group{
      width: 100%;
  }
  .input-group-addon{
      width: 45%;
      text-align: left;
  }
  .form-control {
      width: 55%;
  }

Here's the forked fiddle:

http://jsfiddle.net/6K8sF/

Input Group in combination with span: style problems using bootstrap

So i solved my problem with some custom css.

Create style.css and dont forget to link it in your html code!

that css worked for me:

.input-group-addon {
    min-width:80px;
    text-align:left !important;
}

---

Related Topics