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   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   I added the following to my CSS   form-group  required  control-label after     content  quot   quot  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

User · Answer

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

User · Answer

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   quot  f069 quot    top 4px     position  absolute      margin-left  8px     the HTML  lt div class  quot form-group required quot  gt    lt label for  quot return notes quot  gt  lt     lang  notes     gt  lt  label gt    lt textarea class  quot form-control quot  name  quot return notes quot  id  quot return notes quot   required  quot required quot  gt  lt  textarea gt   lt  div gt

User · Answer

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

User · 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    lt div class  form-group required  gt      lt label class  col-md-2 control-label  gt  amp  160  lt  label gt      lt div class  col-md-4  gt         lt div class  checkbox  gt            lt label class  text  gt   lt  -- use this class -- gt               lt input class    id  id tos  name  tos  required  required  type  checkbox    gt  I have read and agree to the Terms of Service           lt  label gt         lt  div gt      lt  div gt   lt  div gt      Ok third edit    CSS back to what is was   form-group required  control-label after       content         color red      HTML    lt div class  form-group required  gt      lt label class  col-md-2  gt  amp  160  lt  label gt   lt  -- remove class control-label -- gt      lt div class  col-md-4  gt         lt div class  checkbox  gt            lt label class  control-label  gt   lt  -- use this class as the red   will be after control-label -- gt               lt input class    id  id tos  name  tos  required  required  type  checkbox    gt  I have read and agree to the Terms of Service           lt  label gt         lt  div gt      lt  div gt   lt  div gt

User · Answer

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

User · Answer

This CSS worked for me    form-group required control-label before     color  red     content          position  absolute     margin-left  -10px      and this HTML    lt div class  form-group required control-label  gt     lt label for  emailField  gt Email lt  label gt     lt input type  email  class  form-control  id  emailField  placeholder  Type Your Email Address Here    gt   lt  div gt

User · Answer

This works for me  CSS  form-group required control-label before     content   quot   quot      color  red     OR  form-group required control-label after     content   quot   quot      color  red     Basic HTML  lt div class  quot form-group required control-label quot  gt     lt input class  quot form-control quot    gt   lt  div gt

[css] Adding asterisk to required fields in Bootstrap 3

Examples related to css

Examples related to forms

Examples related to twitter-bootstrap-3

Examples related to form-fields