How to add required indication(*) in bootstrap form?

You can easily add asterisk (*) to the required field in bootstrap form fields. Add the below CSS to your page.

CSS:

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

Then add an additional 'required' class to the 'form-group' class.

<form>
<div class="form-group required">
<label class="control-label">Username</label>
<input type="text" name="userName"/>
</div>
</form>

final code and demo is here

<!DOCTYPE html><html>    <head>        <title>Tryit Editor - tools.bitcompiler.com</title>        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>        <style>            .form-group.required .control-label:after              {                 content:"*";                 color:red;             }         </style>    </head>    <body>         <div class="container-fluid">
            <h3>
How to add required indication(*) in bootstrap form?</h3>
<br/>            <form class="form-horizontal">
                <div class="form-group required">
                    <label class="control-label col-sm-2" for="email">Email</label>                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="email" placeholder="Enter email">                    </div>
</div>
<div class="form-group required">
                    <label class="control-label col-sm-2" for="pwd">Password</label>                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="pwd" placeholder="Enter password">                    </div>
</div>
<div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                            <label><input type="checkbox"> Remember me</label>                        </div>
</div>
</div>
<div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default">Submit</button>                    </div>
</div>
</form>
</div>
</body></html>

Demo

How to add required indication(*) in bootstrap form?

No comments:

Post a Comment

Popular Posts

Tags

Contact Form