Bootstrap Basic Input Groups

Here are the basic steps for creating and input group:

• The basic contextual class needed for an input group is the .input-group class. As told before, this is just a container that will add an icon, text or a button at either or both sides of the input as a “help text”.
• The two contextual classes that decide whether the “help text” comes before or after the input are:
  • .input-group-prepend: to add the help text in front of the input
  • .input-group-append to add help text behind the input.
• Finally, we will add the .input-group-text class which will style the specified help text.

Here’s the sample code for illustration:

    

        

            @
        
        
    

    

        
        

            @example.com
        
    

To ensure proper margin-bottom for the input group, you can use the utility class .mb-3

Bootstrap Input Group Sizing

The size of the input groups can be determined using following two classes:

• .input-grp-sm: Small size
• .input-grp-lg: Large size

Check out the code implementation for the same:

    

        

            Small
        
        
    


    

        

            Default
        
        
    


    

        

            Large
        
        
    

Bootstrap Multiple Inputs and Helpers

You can have more than one inputs or addons. Observer the code below to know more:

    

        

            Person
        
        
        
    




    

        

            One
            Two
            Three
        
        
    

Bootstrap Input Group with Check boxes and Radio button

The input groups aren’t restricted to text icons. You can also use radio buttons and checkboxes:

Bootstrap Input Group Buttons

Following code is an example of using different type of buttons in input groups

    

        Basic Button
    
    


    
    

        Go
    


    
    

        OK
        Cancel
    

Bootstrap Input Group with Dropdown Button

To add a dropdown button in the input group you don’t require to use the .dropdown wrapper. See the code below:

    

        
            Dropdown button
        
        

            Link 1
            Link 2
            Link 3
        
    
    

The post Bootstrap Inputs Group appeared first on Ebhor.com.