Adding asterisk to required fields in Bootstrap 3

Question

My HTML has a class called .required that is assigned to required fields.

Here is the HTML:

<form action="/accounts/register/" method="post" role="form" class="form-horizontal">
    <input type='hidden' name='csrfmiddlewaretoken' value='brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt' />
    <div class="form-group required">
       <label class="col-md-2 control-label">Username</label>
       <div class="col-md-4">
         <input class="form-control" id="id_username" maxlength="30" name="username" placeholder="Username" required="required" title="" type="text" />
       </div>
    </div>
    <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>
    <div class="form-group required"><label class="col-md-2 control-label">Password</label><div class="col-md-4"><input class="form-control" id="id_password1" name="password1" placeholder="Password" required="required" title="" type="password" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">Password (again)</label><div class="col-md-4"><input class="form-control" id="id_password2" name="password2" placeholder="Password (again)" required="required" title="" type="password" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">first name</label><div class="col-md-4"><input class="form-control" id="id_first_name" maxlength="30" name="first_name" placeholder="first name" required="required" title="" type="text" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">last name</label><div class="col-md-4"><input class="form-control" id="id_last_name" maxlength="30" name="last_name" placeholder="last name" required="required" title="" type="text" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">&#160;</label><div class="col-md-4"><div class="checkbox"><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>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
           <button type="submit" class="btn btn-primary">
              <span class="glyphicon glyphicon-star"></span> Sign Me Up!
           </button>
        </div>
    </div>
</form>

I added the following to my CSS;

.form-group .required .control-label:after {
  content:"*";color:red;
}

Still that does not give a red * around the required fields. What am I missing here? Isn't there a direct way in Bootstrap 3 to introduce * to required fields?

---

EDIT

The * in terms and conditions does not appear immediately to a checkbox. How to fix this?

Restate

Please mark the question answered. – Fania

Answer 1

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>

Brockman

I tried the edited one, but it did not work. can you please check? – Restate

Change somethings, also in the CSS – Brockman

Seems not to be generic BS3, but custom CSS? It looks responsive to me, too, so maybe it is okay to add this (to your BS theme file, e.g. bootstrap-theme.css). – Minutia

To differentiate pseudo-class and pseudo-elements you can use ::after. Level 3 CSS speculation is out. – Erythrism

For those using react bootstrap components (version 4), use "form-label" instead of "control-label" – Owl

Adding a space before the asterisk is worth a consideration for anyone implementing this. – Owl

Answer 2

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

Totalizer

top:7px; will cause the problems if label is multi-line. It would be better to replace it with margin-top: -4px; for example. – Dolor

Answer 3

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

Dryfoos

thanks! also works for bootstrap 2.3 with .control-group.required .control-label:after { content:"*"; color:red; } – Patrizio

Answer 4

use simple css,

.myform .required:after {
  content: " *";
    color: red;
    font-weight: 100;
}

 <form class="myform">
    <div class="col-md-12">
      <label for="xxx_fname" class="form-label required">First Name</label>
      <input type="text" class="form-control" id="xxx_fname" >
   </div>
    <div class="col-md-12">
      <label for="xxx_lname" class="form-label required">Last Name</label>
      <input type="text" class="form-control" id="xxx_lname" >
   </div>
</form

Upshaw

Answer 5

The other two answers are correct. When you include spaces in your CSS selectors you're targeting child elements so:

.form-group .required {
    styles
}

Is targeting an element with the class of "required" that is inside an element with the class of "form-group".

Without the space it's targeting an element that has both classes. 'required' and 'form-group'

Rolfrolfe

This is a separate issue from your original question. But your CSS is doing exactly what you're telling it to. It's putting the asterisk with the label field (which for your terms and conditions is blank) and not the input field. If you want them to appear together you'll have to group them together in the HTML. But then you have a blank label field which is bad. I would just ditch the label on the terms and conditions but keep the validations. – Rolfrolfe

Answer 6

This CSS worked for me:

.form-group.required.control-label:before{
   color: red;
   content: "*";
   position: absolute;
   margin-left: -10px;
}

and this HTML:

<div class="form-group required control-label">
  <label for="emailField">Email</label>
  <input type="email" class="form-control" id="emailField" placeholder="Type Your Email Address Here" />
</div>

Metallic

It's a little strange to have the control-label on the div that contains both the label and the input. – Medrek

I agree, this is weird to have control-label along with form-group – Glioma

Answer 7

This works for me:

CSS

.form-group.required.control-label:before{
   content: "*";
   color: red;
}

OR

.form-group.required.control-label:after{
   content: "*";
   color: red;
}

Basic HTML

<div class="form-group required control-label">
  <input class="form-control" />
</div>

Diskin

Answer 8

I modified the css, as i am using bootstrap 3.3.6

.form-group.required label:after{   
color: #d00;   
font-family: 'FontAwesome'; 
font-weight: normal;
font-size: 10px;
content: "\f069"; 
top:4px;   
position: absolute;   
 margin-left: 8px;
}

the HTML

<div class="form-group required">
 <label for="return_notes"><?= _lang('notes') ?></label>
 <textarea class="form-control" name="return_notes" id="return_notes"  required="required"></textarea>
</div>

Resume

Answer 9

Simply do the following...

CSS

.form-group.required .control-label:after {
  content:"*";
  color:red;
}

HTML

<form>
  <div class="form-group required">
    <label class="control-label">Name</label>
    ...
  </div>
</form>

Optimize