Below are the different styles of fields. Editable, required, active, error, disabled and read-only fields. You can also disable an entire group by applying disabled to the fieldset. Read more here.

The editable field contains a placeholder. When you are in focus and type 1 character it disappears and replaces with the character typed. Also, when any field contains a value and focus is put on it the value is highlighted through javascript this.select().

Code Snippet

      
      

		

		    Editable Field
		    

		        
		    
		
		

		    Required Field
		    

		        
		    
		
		

		    Disabled Field
		    

		        
		    
		
		

		    Error Field
		    

		        
		        
		    
		
		

		    

		        

		            
		                 Remember me
		            
		        
		    
		

      
      
      

Horizontal forms have labels to the left of the input fields. Use the class .form-horizontal on the <form> element.

Code Snippet

Using no class on the <form> element will bring the labels above the input fields.

Code Snippet

Using .row on the <form> element and wrapping fields in a .col-md-6 will give a two column layout.

Code Snippet

Utilize the bootstrap class .has-error on the .form-group wrapper to call out errors.

Tap on the error icon to view the error message. A bootstrap popover was used and binded to the .field-indicator.

Code Snippet