I am trying to wrap my text input with a label. I have some pickers on my form, and wrapping them in a label enables me to click on the label and activate the picker. However, when I try this with the text box it breaks the form. If I choose not to wrap the text boxes, the spacing between the label and the text box is different than the wrapped elements.

This doesn't work:

<div class="form-group">
    <label>
        Title:
        <input  type="text" class="form-control" data-bind="value: title" />
    </label>
</div>

This works:

<div class="form-group">
    <label>
        Date:
        <div class="input-group">
            <input type="text" class="form-control" placeholder="mm/dd/yy" data-provide="datepicker" data-bind="value  :date" id="Date" />
            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
        </div>
    </label>
</div>    

Also, the text inside the text inputs should not be bold.

I am trying to wrap my text input with a label. I have some pickers on my form, and wrapping them in a label enables me to click on the label and activate the picker. However, when I try this with the text box it breaks the form. If I choose not to wrap the text boxes, the spacing between the label and the text box is different than the wrapped elements.

This doesn't work:

<div class="form-group">
    <label>
        Title:
        <input  type="text" class="form-control" data-bind="value: title" />
    </label>
</div>

This works:

<div class="form-group">
    <label>
        Date:
        <div class="input-group">
            <input type="text" class="form-control" placeholder="mm/dd/yy" data-provide="datepicker" data-bind="value  :date" id="Date" />
            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
        </div>
    </label>
</div>    

Also, the text inside the text inputs should not be bold.

• javascript
• html
• css
• twitter-bootstrap

• I think I missed the question.. – turbopipp Commented Nov 15, 2015 at 22:52
• You do not want bold text? And you posted a code that works..? What in the working code do you want to change exactly? – turbopipp Commented Nov 15, 2015 at 22:57
• I don't want bold text in the input fields, and I want them to take up the full width in the form, like the other fields. I want to do this all with bootstrap, no CSS. – Musical Shore Commented Nov 15, 2015 at 22:58

3 Answers 3

You want to update your css, changing your label's to either display as block, or set their width to 100%. Then you also want to have input's inside labels set to a font-weight of normal.

label {
    display:block;
}
label input {
    font-weight:normal
}

https://jsfiddle/partypete25/95ygubwx/

As an alternative, don't need to wrap elements for activation, you can just use the for attribute:

<label for="title">Title</label>
<input id="title" type="text" class="form-control" data-bind="value: title" />

If you don't want this, then you need to understand cascading styles.

You don't need to wrap input inside label. for attribute of label element is doing the same thing you want to achieve.The correct way to create form control in bootstrap is:

<div class="form-group">
  <label for="title">Title:</label>
    <input type="text" class="form-control" data-bind="value: title" id="title" />      
</div>

Why input not taking full-width and text being bold: Following is the label css applied by bootstrap library.

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

In your case, if you wrap input inside label, input is inhering the font-weight: 700 px; from it's parent(label) and hence bold.

And the parent label's max-width: 100% is restricting the input width. If it could have width: 100% than, input would take full width. There is difference between max-width and width.