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?

enter image description here

Please mark the question answered. – LoveAndHappiness Feb 15 '15 at 20:00 — LoveAndHappiness, Feb 15 '15 at 20:00

Timvp · Accepted Answer · 2014-04-23T10:40:01.253

325

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>

edited Apr 23 '14 at 10:40

answered Apr 17 '14 at 19:36

Timvp

3,681
1
14
15

3

I tried the edited one, but it did not work. can you please check? – brain storm Apr 22 '14 at 21:31
Change somethings, also in the CSS – Timvp Apr 23 '14 at 09:18
1

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`). – Roland Sep 12 '18 at 12:15
To differentiate pseudo-class and pseudo-elements you can use `::after`. [Level 3 CSS](https://www.w3.org/TR/2018/REC-selectors-3-20181106/#gen-content) speculation is out. – Niyongabo Eric Jun 09 '20 at 10:34
For those using react bootstrap components (version 4), use "form-label" instead of "control-label" – Logan Cundiff Mar 29 '22 at 17:09
Adding a space before the asterisk is worth a consideration for anyone implementing this. – Logan Cundiff Mar 29 '22 at 17:10

score 83 · Answer 2 · edited Oct 05 '15 at 16:15

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

`top:7px;` will cause the problems if label is multi-line. It would be better to replace it with `margin-top: -4px;` for example. — sasha_gud, Jan 18 '17 at 13:05

score 7 · Answer 3 · answered Apr 17 '14 at 19:33

7

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

answered Apr 17 '14 at 19:33

Jeremy Cook

20,840
9
71
77

thanks! also works for bootstrap 2.3 with `.control-group.required .control-label:after { content:"*"; color:red; }` – edditor Jul 16 '14 at 14:58

score 6 · Answer 4 · answered Jun 15 '21 at 13:48

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

score 3 · Answer 5 · answered Apr 17 '14 at 19:41

3

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'

answered Apr 17 '14 at 19:41

Corey

463
3
12

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. – Corey Apr 18 '14 at 21:13

score 2 · Answer 6 · edited Feb 21 '17 at 05:38

2

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>

edited Feb 21 '17 at 05:38

technophobia

2,644
1
20
29

answered Feb 21 '17 at 05:29

tomahawk

21
1

It's a little strange to have the control-label on the div that contains both the label and the input. – devlin carnate Oct 20 '17 at 22:04
I agree, this is weird to have control-label along with form-group – Marc Roussel May 25 '21 at 03:36

score 1 · Answer 7 · answered Oct 20 '20 at 10:18

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>

score 1 · Answer 8 · answered Oct 27 '20 at 12:00

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>

score 0 · Answer 9 · answered May 08 '23 at 16:17

0

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>

answered May 08 '23 at 16:17

Sadikul Haque Sadi

387
5
17

Adding asterisk to required fields in Bootstrap 3

EDIT

9 Answers9

Linked