Bootstrap Forms group – Examples & Tutorials

Today, We want to share with you form group bootstrap.In this post we will show you bootstrap form validation, hear for bootstrap form template free download we will give you demo and example for implement.In this post, we will learn about bootstrap 3 input-group with an example.

bootstrap form group with form-control

There are the Following The simple About bootstrap form design Full Information With Example and source code.

As I will cover this Post with live Working example to develop bootstrap contact form, so the bootstrap form-control width is used for this example is following below.

Bootstrap Form Layouts group provides there are main 3 types of form layouts:

• Horizontal form
• Inline form
• Vertical form

Example 1: bootstrap-form-group

  

    

      

        First Name
        
      
    
    

      

        Last Name
        
      
    
  
  

    

      Address
      
    
    

      PO Box - Apt - Suite
      
    
  
  

    

      City
      
    
    

      State
      
    
    

      Zip
      
    
  
  

    

      

        Email
        
      
    
  
  

    

      

        A Long Descriptive Label
        
      
    
  
  

    

      

        

          

            
Date
            
Item
            
Qty
            
Amount
          
        
        

          

            
3/23/2016
            
Widget A
            
1
            
3,200.00
          
          

            
3/23/2016
            
Widget X with extra extra extra extra extra extra extra extra extra extra extra extra long name
            
1
            
3,200.00
          
          

            
4/16/2016
            
Widget B
            
1
            
4,200.00
          
        
      
    
  

Example 2: Bootstrap form layout

HTML Code

  

    

      

        Personal Information
      
      

        

          First Name
          
        
        

          MI
          
        
        

          Last Name
          
        
        
        

          Address
          
          
        

        
      
    
  


  

    

      

        Payment Information
      
      


      
    
  

CSS Code

.form-group-inline {
  display: inline-block;
}

.form-control-inline {
    min-width: 0;
    width: auto;
    display: inline;
    margin-left: 5px;
}

.form-control-small {
  min-width: 40px;
  max-width: 50px;
}

.form-control-medium {
  min-width: 200px;
  max-width: 250px;
}

.form-control-large {
  min-width: 400px;
  max-width: 500px;
}
.label-block {
  display: block;
  margin-left: 5px;
}

Example 3: Bootstrap Form Template

  

    
Contact Us
    

      

        

          First Name
          
        
      
      

      

        

          Last Name
          
        
      
      
    


    

      

        

          Company
          
        


      
      

      


        

          Phone Number
          
        
      
      
    
    


    

      


        

          Email address
          
        
      
      

      

        

          Your Website Please include http://
          
        

      
      
    
    


    When is the best time of day to reach you?
    

      
        Morning
      
    
    

      
        Evening
      
    

    Would you like to recieve our email newsletter?
    


      
         Sure!
      
    


    Submit
  

Example 4: Form Inline – Bootstrap 4

  

    

      

        

          

            

              Name 

              
            
            

              Email address 

              
            
            

              Mobile 

              
            
          
          

            

              State 

              
            
            

              City 

              
            
            

              Zip 

              
            
          
          

            

              Submit
            
          
  
        
      
    
  

CSS Code

.row {
  margin:15px 0;
}
label {
  margin-bottom: 0;
  margin-left: 1px;
}

Example 5: Bootstrap mixed form

  
  

 
Panel heading
 
 

  

  
Bootstrap Mixed Form 
with horizontal and inline fields

  

    

      Email
      

    
    

      Password
      

    
    

      Textarea
      

    
    

      
First name
      
Last name
    
    

      Phone number
      
area
      
local
      
number
      
ext
    
    

      Options
      

      

    
    

      

        Submit
      
    
  
  


  


     Yes button  
    Go  back 



  
 

Example 6: Bootstrap 4 – form-group

I hope you get an idea about form group bootstrap.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.