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

I made a form with Bootstrap 3 and I would like to set the same width to all the labels.

From this: form now

To this: it should look like this

I made a fiddle for this: http://jsfiddle.net/52VtD/4262/

<form id="create_new_campaign" name="create_new_campaign" action="kampagnen.php" method="post" enctype="multipart/form-data">
    <div class="input-group">
              <span class="input-group-addon">Kennzeichen</span>
              <input type="text" class="form-control" placeholder="Kennzeichen" name="data[kennzeichen]" id="kennzeichen">
            </div>
            ...
  </form>
htmlcssformstwitter-bootstrap


Solution 1:[1]

<form id="create_new_campaign" name="create_new_campaign" action="kampagnen.php" method="post" enctype="multipart/form-data">
    <div class="input-group" style="width: 100%;">
              <span class="input-group-addon"style="width: 35.1%;">Kennzeichen</span>
              <input type="text" class="form-control" placeholder="Kennzeichen" name="data[kennzeichen]" id="kennzeichen">
            </div>
            <div class="input-group"style="width: 100%;">
              <span class="input-group-addon" style="width: 35.1%;">von</span>
              <input type="text" class="form-control span2" id="von">
            </div>
            <div class="input-group" style="width: 100%;">
                <span class="input-group-addon" style="width: 35.1%;">bis</span>
              <input type="text" class="form-control span2" id="bis">
              </div>
            </div>

            <div class="input-group" style="width: 100%;">
              <span class="input-group-addon" style="width: 35.1%;">Verantwortlicher Produktmanager</span>
              <input type="text" class="form-control" placeholder="Produktmanager" name="data[prod_manager]" id="prod_manager">
            </div>

            <div class="input-group"style="width: 100%;">
              <span class="input-group-addon" style="width: 35.1%;">Verantwortlicher Fachbereich</span>
              <input type="text" class="form-control" placeholder="Fachbereich" name="data[fachbereich]" id="fachbereich">
            </div>

            <div class="input-group" style="width: 100%;">
              <span class="input-group-addon" style="width: 35.1%;">Ansprechpartner Fachbereich</span>
              <input type="text" class="form-control" placeholder="AnsprechpartnerFachbereich" name="data[ap_fachbereich]" id="ap_fachbereich">
            </div>

            <div class="input-group" style="width: 100%;">
              <span class="input-group-addon" style="width: 35.1%;">Ansprechpartner Vertrieb</span>
              <input type="text" class="form-control" placeholder="AnsprechpartnerVertrieb" name="data[ap_vertrieb]" id="ap_vertrieb">
            </div>

            <div class="input-group" align="center" style="width: 100%;">
                <br />
                <button type="submit" class="btn btn-primary">Speichern</button>&nbsp;&nbsp;&nbsp;
                <input type="reset" value="Reset" class="btn btn-warning">
            </div>
  </form>

http://jsfiddle.net/52VtD/4264/

Solution 2:[2]

their are two ways to set all the labels of same size.

DEMO

1) CSS

.input-group-addon {
    width: 253px;
}

But if the label value text is increase or decrease dynamically, you need to fixed this issue using jQuery.

DEMO

2) jQuery

var max = 0;
$(".input-group-addon").each(function(){
    if ($(this).width() > max)
        max = $(this).width();   
});
$(".input-group-addon").width(max);

Solution 3:[3]

This is the example I did:

<span class="input-group-addon" style="width: 20%;">Last Name</span>
<input id="lname" type="text" class="form-control input-lg" name="lname" placeholder="Last Name">

I did not alter or made customization on the bootstraps' classes because it affects globally. I hate to see my login page with the same width I stated in the emplyee entry module.

Solution 4:[4]

Alright, this is ages old but I still stumbled upon this same problem. Instead of giving it a non-dynamic width I wanted to actually make it "proper" and adjust to the width of the given content. While I don't know if this goes against the intended use-cases of Bootstrap, I did achieve dynamic behavior through the use of a grid in which I define two columns - one for the label (width of content) and the other for the input (remaining width).

HTML:

<div class="input-group grid-container">
    <span class="input-group-text">Your Name</span>
    <input type="text" class="form-control" name="name" placeholder="Kimi No Na Wa">
    <span class="input-group-text">Your Age</span>
    <input type="text" class="form-control" name="age" placeholder="42">
    <span class="input-group-text">Your Unnecessarily Long Label That Still Fits Inside Here</span>
    <input type="text" class="form-control" name="wow" placeholder="Yay">
</div>

CSS:

.grid-container {
    display: grid;
    width: 100%;
    grid-template-columns: max-content 1fr;
}
.grid-container .form-control {
    width: 100%;
}

Here's my fiddle: https://jsfiddle.net/r8jm7Lqu/

Solution 5:[5]

try this:

.input-group>.input-group-prepend {
   flex: 0 0 20%;
}
.input-group .input-group-text {
   width: 100%;
}

I found this solution at this site, and totally works for me:

bootstrap-4-input_group-prepend-equal-width

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rebecca
Solution 2 Santy
Solution 3 Noel Ablon
Solution 4 Pascal Stockert
Solution 5 László Jóbi

Related Questions