Bootstrap 3 Input groups

  • Extend form controls by adding text or buttons before, after, or on both sides of any text-based <input>. Use .input-group with an .input-group-addon or .input-group-btn to prepend or append elements to a single .form-control.

Basic example

Place one add-on or button on either side of an input. You may also place one on both sides of an input.

The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind it as a "help text".

The .input-group-addon class attaches an icon or help text next to the input field.

Example
@

@example.com

$ .00

https://example.com/users/
    
        <div class="input-group">    
                <span class="input-group-addon" id="basic-addon1">@</span>    
                <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">  
        </div>    
        
        <div class="input-group">    
                <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
                <span class="input-group-addon" id="basic-addon2">@example.com</span>  
        </div>    
        
        <div class="input-group">    
                <span class="input-group-addon">$</span>    
                <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">    
                <span class="input-group-addon">.00</span>  
        </div>    
        
        <label for="basic-url">Your vanity URL</label>  
        <div class="input-group">    
                <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>    
                <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">  
        </div>
    

Sizing

Add the relative form sizing classes to the .input-group itself and contents within will automatically resizeā€”no need for repeating the form control size classes on each element.

Example
@

@

@
        
        <div class="input-group input-group-lg"> 
                <span class="input-group-addon" id="sizing-addon1">@</span> 
                <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1"> 
        </div>

        <div class="input-group"> 
                <span class="input-group-addon" id="sizing-addon2">@</span> 
                <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2"> 
        </div>

        <div class="input-group input-group-sm"> 
                <span class="input-group-addon" id="sizing-addon3">@</span> 
                <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3"> 
        </div>
    

Checkboxes and radio addons

Place any checkbox or radio option within an input group's addon instead of text.

Example
            <div class="row">    
                    <div class="col-sm-6">      
                        <div class="input-group">        
                            <span class="input-group-btn">          
                                    <button class="btn btn-default" type="button">Go!</button>          
                            </span>        
                            <input type="text" class="form-control" placeholder="Search for...">
                    </div><!-- /input-group -->    
            </div><!-- /.col-sm-6 -->    
            <div class="col-sm-6">      
                    <div class="input-group">        
                            <input type="text" class="form-control" placeholder="Search for...">        
                                    <span class="input-group-btn">          
                                            <button class="btn btn-default" type="button">Go!</button>        
                                    </span>      
                            </div><!-- /input-group -->    
                    </div><!-- /.col-sm-6 -->  
            </div><!-- /.row -->
    

Button addons

Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

Example
        
        <div class="row">
                <div class="col-sm-6">
                        <div class="input-group">
                                <span class="input-group-btn">
                                <button class="btn btn-default" type="button">Go!</button>
                                </span>
                                <input type="text" class="form-control" placeholder="Search for...">
                        </div><!-- /input-group -->
                </div><!-- /.col-sm-6 -->
                <div class="col-sm-6">
                        <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search for...">
                                <span class="input-group-btn">
                                <button class="btn btn-default" type="button">Go!</button>
                                </span>
                        </div><!-- /input-group -->
                </div><!-- /.col-sm-6 -->
        </div><!-- /.row -->
    

Buttons with dropdowns

        
        <div class="row">
                <div class="col-sm-6">
                        <div class="input-group">
                                <div class="input-group-btn">
                                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                                        <ul class="dropdown-menu">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li role="separator" class="divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                        </ul>
                                </div><!-- /btn-group -->
                                <input type="text" class="form-control" aria-label="...">
                        </div><!-- /input-group -->
                </div><!-- /.col-sm-6 -->
                <div class="col-sm-6">
                        <div class="input-group">
                        <input type="text" class="form-control" aria-label="...">
                                <div class="input-group-btn">
                                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                                        <ul class="dropdown-menu dropdown-menu-right">
                                                <li><a href="#">Action</a></li>
                                                <li><a href="#">Another action</a></li>
                                                <li><a href="#">Something else here</a></li>
                                                <li role="separator" class="divider"></li>
                                                <li><a href="#">Separated link</a></li>
                                        </ul>
                                </div><!-- /btn-group -->
                        </div><!-- /input-group -->
                </div><!-- /.col-sm-6 -->
        </div><!-- /.row -->
    

Segmented buttons

    
        <div class="row">
                <div class="col-sm-6">
                        <div class="input-group">
                        <div class="input-group-btn">
                                <button type="button" class="btn btn-default">Action</button>
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <ul class="dropdown-menu">
                                        <li><a href="#">Action</a>
                                        </li>
                                        <li><a href="#">Another action</a>
                                        </li>
                                        <li><a href="#">Something else here</a>
                                        </li>
                                        <li role="separator" class="divider"></li>
                                        <li><a href="#">Separated link</a>
                                        </li>
                                </ul>
                        </div><!-- /btn-group -->
                        <input class="form-control" aria-label="Text input with segmented button dropdown">
                        </div><!-- /input-group -->
                </div><!-- /.col-sm-6 -->
                <div class="col-sm-6">
                        <div class="input-group">
                                <input class="form-control" aria-label="Text input with segmented button dropdown">
                                <div class="input-group-btn">
                                        <button type="button" class="btn btn-default">Action</button>
                                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <span class="caret"></span>
                                        <span class="sr-only">Toggle Dropdown</span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-right">
                                                <li><a href="#">Action</a>
                                                </li>
                                                <li><a href="#">Another action</a>
                                                </li>
                                                <li><a href="#">Something else here</a>
                                                </li>
                                                <li role="separator" class="divider"></li>
                                                <li><a href="#">Separated link</a>
                                                </li>
                                        </ul>
                                </div><!-- /btn-group -->
                        </div><!-- /input-group -->
                </div><!-- /.col-sm-6 -->
        </div><!-- /.row -->
    

Multiple buttons

While you can only have one add-on per side, you can have multiple buttons inside a single .input-group-btn.

Example
        
        <div class="row">
                <div class="col-sm-6">
                        <div class="input-group">
                                <div class="input-group-btn">
                                <button type="button" class="btn btn-default" aria-label="Bold"><span class="glyphicon glyphicon-bold"></span></button>
                                <button type="button" class="btn btn-default" aria-label="Italic"><span class="glyphicon glyphicon-italic"></span></button>
                                </div>
                                <input class="form-control" aria-label="Text input with multiple buttons">
                        </div>
                </div>
                <div class="col-sm-6">
                        <div class="input-group">
                                <input class="form-control" aria-label="Text input with multiple buttons">
                                <div class="input-group-btn">
                                <button type="button" class="btn btn-default" aria-label="Help"><span class="glyphicon glyphicon-question-sign"></span></button>
                                <button type="button" class="btn btn-default">Action</button>
                                </div>
                        </div>
                </div>
        </div>
    

Copyright 2016 by WebiBeris.com. All Rights Reserved.