Defining a `required` field in Bootstrap

Question

How do I define text field as required (with red border) in Twitter Bootstrap 3?

required="required" doesn't work...

<form role="form">   <div class="form-group">     <label for="exampleInputEmail1">Email address</label>     <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">   </div>   <div class="form-group">     <label for="exampleInputPassword1">Password</label>     <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">   </div>   <div class="form-group">     <label for="exampleInputFile">File input</label>     <input type="file" id="exampleInputFile">     <p class="help-block">Example block-level help text here.</p>   </div>   <div class="checkbox">     <label>       <input type="checkbox"> Check me out     </label>   </div>   <button type="submit" class="btn btn-default">Submit</button> </form> 

Answer 1

Try using required="true" in bootstrap 3

Answer 2

Update 2018

Since the original answer HTML5 validation is now supported in all modern browsers. Now the easiest way to make a field required is simply using the required attibute.

<input type="email" class="form-control" id="exampleInputEmail1" required>

or in compliant HTML5:

<input type="email" class="form-control" id="exampleInputEmail1" required="true"> 

Read more on Bootstrap 4 validation

---

In Bootstrap 3, you can apply a "validation state" class to the parent element: http://getbootstrap.com/css/#forms-control-validation

For example has-error will show a red border around the input. However, this will have no impact on the actual validation of the field. You'd need to add some additional client (javascript) or server logic to make the field required.

Demo: http://bootply.com/90564

---