폼 그룹 너비 맞추기 how to format bootstrap input form - all labels with the same width

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:

To 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>

html css forms twitter-bootstrap

4 Answers

activeoldestvotes

3

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/

shareimprove this answer

answered Apr 9 '14 at 7:23

winnyboy5

90021637

• Thanks! works perfect! – roeb Apr 9 '14 at 7:31
• @roeb welcome :) – winnyboy5 Apr 9 '14 at 7:36
• bootstrap changed the URLs of the ressources - new working fork: jsfiddle.net/6K8sF/11 – roeb Oct 26 '17 at 14:21 

add a comment

2

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

shareimprove this answer

answered Apr 9 '14 at 7:47

Rebecca

1591421

• new working fork - bootstrap changed URLs to css/js : jsfiddle.net/52VtD/16718 – roeb Oct 26 '17 at 14:22

add a comment

1

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

shareimprove this answer

answered Apr 9 '14 at 7:56

Santy

27413

• But if you resize Browser window the labels get out of sync. – Mark May 13 '16 at 15:22 

add a comment

0

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.

shareimprove this answer

answered Mar 4 '18 at 16:14

Noel Ablon

1

https://stackoverflow.com/questions/22955360/how-to-format-bootstrap-input-form-all-labels-with-the-same-width