bootstrap form required field

Question

I have a bootstrap form like this:

<div class="container">
    <form class="form-horizontal">
        <div class="form-group">
            <div class="col-xs-2 text-right">
                <label class="control-label">Name</label>
            </div>
            <div class="required col-xs-10" >
                <input class="form-control" type="text" />
            </div>
        </div>
    </form>
</div>

Now the name field is required so i want to display an asterisk right next to it. I tried this:

.required:after {
    content: " *";
}

But it is displayed under the input, not right next to it. How can i fix this? JSFiddle: http://jsfiddle.net/Dc5yw/

do you want * next to text name or next to input? – Pravin W Apr 09 '14 at 06:43 — Pravin W, Apr 09 '14 at 06:43
It should be next to the input. – lunr Apr 09 '14 at 06:45 — lunr, Apr 09 '14 at 06:45

score 9 · Accepted Answer · answered Apr 09 '14 at 06:45

9

Reduce the width of the input fields form-control and add float:left to this.

Check the fiddle

CSS changes

.required:after {
    content: "*";
    padding-left:1%;
}

.form-control{
    width:97%;
    float:left;
}

answered Apr 09 '14 at 06:45

James

4,540
1
18
34

score 2 · Answer 2 · answered Apr 09 '14 at 06:50

2

check this fiddle.this will solve ur problem.

http://jsfiddle.net/Dc5yw/1/

change this

<div class="required col-xs-10" >
<input class="form-control1" type="text" />
</div>

answered Apr 09 '14 at 06:50

Abhijit Mali

132
2
8

score 2 · Answer 3 · answered Apr 09 '14 at 07:02

2

.required::after {
 content: "*";
 position:absolute;
 right:0px;
 top:10px;
}

check this JSFiddle

side note: :after is old syntax, now it is ::after

answered Apr 09 '14 at 07:02

T J

42,762
13
83
138

score 0 · Answer 4 · answered Apr 09 '14 at 06:49

0

DEMO

CSS

.col-xs-10 {
    position:relative;
}
.required:after {
    content:" *";
    position: absolute;
    top: 0;
    right: 5px;
}

answered Apr 09 '14 at 06:49

Pravin W

2,451
1
20
26

without making changes in previous CSS just additional position:relative; on .col-xs-10 – Pravin W Apr 09 '14 at 06:50

score -1 · Answer 5 · edited Sep 09 '19 at 16:14

-1

In your HTML

<div class="form-group required">
  <label class="col-md-4 control-label" for="textinput">Name<span style="color:red;">*</span></label>
    <div class="col-md-4">
      <input id="textinput" name="textinput" placeholder="Your name" class="form-control input-md" required="" type="text">
                                
    </div>
</div>

edited Sep 09 '19 at 16:14

RASHED

128
8

answered Apr 20 '15 at 12:04

Alex Ferrer

1
1

This adds the required parameter while the user ask about displaying an asterisk next to an input field. Please always include an elaborate description of your code in your answer so it can be helpful – Bowdzone Apr 20 '15 at 12:26

bootstrap form required field

5 Answers5