Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Bootstrap button in input group

Suggested Video Tutorials
Part 23 - Bootstrap form validation states
Part 24 - Bootstrap form controls height and width
Part 25 - Bootstrap input groups



In Part 25 of Bootstrap tutorial, we discussed using text and icons in input groups. In this video we will discuss using buttons in input groups.



To use a button in an input group use input-group-btn class instead of input-group-addon class.
bootstrap input group button

<div class="input-group">
    <input type="text" class="form-control"/>
    <span class="input-group-btn">
        <button class="btn btn-default" type="button">Search</button>
    </span>
</div>

Using a button dropdown in an input group
bootstrap input group button dropdown

<div class="input-group">
    <input type="text" class="form-control"/>
    <div class="input-group-btn">
        <button type="button" data-toggle="dropdown"
                class="btn btn-default dropdown-toggle">
            Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">Action 1</a></li>
            <li><a href="#">Action 2</a></li>
            <li><a href="#">Action 3</a></li>
        </ul>
    </div>
</div>

Segmented buttons can also be added to the input element very easily as shown below. Notice we have a standard button along with a dropdown button appended on the right hand side of the input element.
bootstrap segmented buttons example

<div class="input-group">
    <input type="text" class="form-control"/>
    <div class="input-group-btn">
        <button type="button" class="btn btn-default">Action</button>
        <button type="button" data-toggle="dropdown"
                class="btn btn-default dropdown-toggle">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">Action 1</a></li>
            <li><a href="#">Action 2</a></li>
            <li><a href="#">Action 3</a></li>
        </ul>
    </div>
</div>

Multiple buttons can also be added to the input element.
bootstrap input group multiple buttons

<div class="input-group">
    <input type="text" class="form-control"/>
    <div class="input-group-btn">
        <button type="button" class="btn btn-default">Cut</button>
        <button type="button" class="btn btn-default">Copy</button>
        <button type="button" class="btn btn-default">Paste</button>
    </div>
</div>

Multiple buttons with icons added to the input element
bootstrap input group button icon

<div class="input-group">
    <input type="text" class="form-control"/>
    <div class="input-group-btn">
        <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-align-left"></span>
        </button>
        <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-align-center"></span>
        </button>
        <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-align-right"></span>
        </button>
    </div>
</div>

bootstrap tutorial for beginners

2 comments:

  1. Hi sir, pls tell when u will start complete asp.net ajax tutorial.. pls waiting for ur reply .. bcoz its important to learn for me in my organization.. kindly reply sir.. pls..

    ReplyDelete

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.