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/

Answer 1

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

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