How to make the bootstrap class="label label-default" same width as the input

Question

I found examples with the prepend add-on but not the default label. How can make it so the label is the same width as the input?

<div class="control-group">
    <span class="label label-default">ChangeOrder Attn</span>
    <input ng-model="ChangeOrderAttn" class="form-control" type="text">
</div>

Answer 1

Probably not Bootstrap but generally speaking that, the input has form-control and that's why it has width:100% so simply you may apply this to your span or just add display:block, in this case, this will also consume 100% width of it's parent. So, if you create another class and use that, for example (DEMO):

CSS:

.full-width {
    display:block;
}

HTML:

<div class="control-group">
    <span class="label label-default full-width">ChangeOrder Attn</span>
    <input ng-model="ChangeOrderAttn" class="form-control" type="text" />
</div>

Then the span will get 100% width and this way you can optionally use .full-width only when needed. Just modify the behavior by adding another class. You may also add other styles in that class if needed. But, there could be a ready made way in Bootstrap - 3 using it's native class.

Answer 2

If you are using Bootstrap 3, you could set the width for the group and the label like this:

<div class="control-group col-sm-12">
    <span class="label label-default col-sm-12">ChangeOrder Attn</span>
    <input ng-model="ChangeOrderAttn" class="form-control" type="text">
</div>