Adding Asterisk To Required Fields In Bootstrap 3

Answer :

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">&#160;</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">&#160;</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> 

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

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