Mark error in form using Bootstrap

Question

I\'ve started using Bootstrap in order to achieve a nice page design without resorting to GWT (the backend is made in java)

For my login screen I copied this example

Answer 1

(UPDATED with examples for Bootstrap v4, v3 and v3)

Examples of forms with validation classes for the past few major versions of Bootstrap.

Bootstrap v4

See the live version on codepen

  

    

      Email
      

        
      
    

    

      Password
      

        
      
      

        
          Must be 8-20 characters long.
              
      
    
  

Bootstrap v3

See the live version on codepen

  

    Input with warning
    
    Something may have gone wrong
  
  

    Input with error
    
    Please correct the error
  
  

    Input with info
    
    Username is taken
  
  

    Input with success
    
    Woohoo!
  

Bootstrap v2

See the live version on jsfiddle

The .error, .success, .warning and .info classes are appended to the .control-group. This is standard Bootstrap markup and styling in v2. Just follow that and you're in good shape. Of course you can go beyond with your own styles to add a popup or "inline flash" if you prefer, but if you follow Bootstrap convention and hang those validation classes on the .control-group it will stay consistent and easy to manage (at least since you'll continue to have the benefit of Bootstrap docs and examples)

  

    

      Input with warning
      

        
        Something may have gone wrong
      
    
    

      Input with error
      

        
        Please correct the error
      
    
    

      Input with info
      

        
        Username is taken
      
    
    

      Input with success
      

        
        Woohoo!