title: Adding asterisk to required fields in Bootstrap 3
body: <p>My HTML has a class called <code>.required</code> that is assigned to required fields.</p>
  <p>Here is the HTML:</p>
  <pre><code>&lt;form action=&quot;/accounts/register/&quot; method=&quot;post&quot; role=&quot;form&quot; class=&quot;form-horizontal&quot;&gt;
      &lt;input type='hidden' name='csrfmiddlewaretoken' value='brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt' /&gt;
      &lt;div class=&quot;form-group required&quot;&gt;
         &lt;label class=&quot;col-md-2 control-label&quot;&gt;Username&lt;/label&gt;
         &lt;div class=&quot;col-md-4&quot;&gt;
           &lt;input class=&quot;form-control&quot; id=&quot;id_username&quot; maxlength=&quot;30&quot; name=&quot;username&quot; placeholder=&quot;Username&quot; required=&quot;required&quot; title=&quot;&quot; type=&quot;text&quot; /&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-group required&quot;&gt;&lt;label class=&quot;col-md-2 control-label&quot;&gt;E-mail&lt;/label&gt;&lt;div class=&quot;col-md-4&quot;&gt;&lt;input class=&quot;form-control&quot; id=&quot;id_email&quot; name=&quot;email&quot; placeholder=&quot;E-mail&quot; required=&quot;required&quot; title=&quot;&quot; type=&quot;email&quot; /&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;div class=&quot;form-group required&quot;&gt;&lt;label class=&quot;col-md-2 control-label&quot;&gt;Password&lt;/label&gt;&lt;div class=&quot;col-md-4&quot;&gt;&lt;input class=&quot;form-control&quot; id=&quot;id_password1&quot; name=&quot;password1&quot; placeholder=&quot;Password&quot; required=&quot;required&quot; title=&quot;&quot; type=&quot;password&quot; /&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;div class=&quot;form-group required&quot;&gt;&lt;label class=&quot;col-md-2 control-label&quot;&gt;Password (again)&lt;/label&gt;&lt;div class=&quot;col-md-4&quot;&gt;&lt;input class=&quot;form-control&quot; id=&quot;id_password2&quot; name=&quot;password2&quot; placeholder=&quot;Password (again)&quot; required=&quot;required&quot; title=&quot;&quot; type=&quot;password&quot; /&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;div class=&quot;form-group required&quot;&gt;&lt;label class=&quot;col-md-2 control-label&quot;&gt;first name&lt;/label&gt;&lt;div class=&quot;col-md-4&quot;&gt;&lt;input class=&quot;form-control&quot; id=&quot;id_first_name&quot; maxlength=&quot;30&quot; name=&quot;first_name&quot; placeholder=&quot;first name&quot; required=&quot;required&quot; title=&quot;&quot; type=&quot;text&quot; /&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;div class=&quot;form-group required&quot;&gt;&lt;label class=&quot;col-md-2 control-label&quot;&gt;last name&lt;/label&gt;&lt;div class=&quot;col-md-4&quot;&gt;&lt;input class=&quot;form-control&quot; id=&quot;id_last_name&quot; maxlength=&quot;30&quot; name=&quot;last_name&quot; placeholder=&quot;last name&quot; required=&quot;required&quot; title=&quot;&quot; type=&quot;text&quot; /&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;div class=&quot;form-group required&quot;&gt;&lt;label class=&quot;col-md-2 control-label&quot;&gt;&amp;#160;&lt;/label&gt;&lt;div class=&quot;col-md-4&quot;&gt;&lt;div class=&quot;checkbox&quot;&gt;&lt;label&gt;&lt;input class=&quot;&quot; id=&quot;id_tos&quot; name=&quot;tos&quot; required=&quot;required&quot; type=&quot;checkbox&quot; /&gt; I have read and agree to the Terms of Service&lt;/label&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;div class=&quot;col-sm-offset-2 col-sm-10&quot;&gt;
             &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;
                &lt;span class=&quot;glyphicon glyphicon-star&quot;&gt;&lt;/span&gt; Sign Me Up!
             &lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p>I added the following to my CSS;</p>
  <pre><code>.form-group .required .control-label:after {
    content:&quot;*&quot;;color:red;
  }
  </code></pre>
  <p>Still that does not give a red <code>*</code> around the required fields. What am I missing here? Isn't there a direct way in Bootstrap 3 to introduce <code>*</code> to required fields?</p>
  <hr />
  <h2>EDIT</h2>
  <p>The <code>*</code> in terms and conditions does not appear immediately to a checkbox. How to fix this?</p>
  <p><img src="https://i.stack.imgur.com/foCJt.png" alt="enter image description here" /></p>