Adding asterisk to required fields in Bootstrap 3
Use .form-group.required
without the space.
.form-group.required .control-label:after {
content:"*";
color:red;
}
Edit:
For the checkbox you can use the pseudo class :not(). You add the required * after each label unless it is a checkbox
.form-group.required:not(.checkbox) .control-label:after,
.form-group.required .text:after { /* change .text in whatever class of the text after the checkbox has */
content:"*";
color:red;
}
Note: not tested
You should use the .text class or target it otherwise probably, try this html:
<div class="form-group required">
<label class="col-md-2 control-label"> </label>
<div class="col-md-4">
<div class="checkbox">
<label class='text'> <!-- use this class -->
<input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
</label>
</div>
</div>
</div>
Ok third edit:
CSS back to what is was
.form-group.required .control-label:after {
content:"*";
color:red;
}
HTML:
<div class="form-group required">
<label class="col-md-2"> </label> <!-- remove class control-label -->
<div class="col-md-4">
<div class="checkbox">
<label class='control-label'> <!-- use this class as the red * will be after control-label -->
<input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
</label>
</div>
</div>
</div>
.form-group .required .control-label:after
should probably be .form-group.required .control-label:after
. The removal of the space between .form-group and .required is the change.
Assuming this is what the HTML looks like
<div class="form-group required">
<label class="col-md-2 control-label">E-mail</label>
<div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div>
</div>
To display an asterisk on the right of the label:
.form-group.required .control-label:after {
color: #d00;
content: "*";
position: absolute;
margin-left: 8px;
top:7px;
}
Or to the left of the label:
.form-group.required .control-label:before{
color: red;
content: "*";
position: absolute;
margin-left: -15px;
}
To make a nice big red asterisks you can add these lines:
font-family: 'Glyphicons Halflings';
font-weight: normal;
font-size: 14px;
Or if you are using Font Awesome add these lines (and change the content line):
font-family: 'FontAwesome';
font-weight: normal;
font-size: 14px;
content: "\f069";