CODEWITHSUNDEEP
twitter-bootstrap
BiJ
BiJ

Reputation: 1689

Bootstrap input-group side by side text boxes

How can I have 2 text boxes side by side in an bootstrap input group with a dropdown at the end.

When I use a span with class input-group-addon its working fine. See this fiddle.

<div class="input-group input-group-sm" style="width:400px">
    <input type="text" class="form-control"  >
    <span class="input-group-addon" id="sizing-addon1">label</span>
    <input type="text" class="form-control"  >
    <div class="input-group-btn">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">Copy pair</a></li>
            <li><a href="#">Paste pair</a></li>
        </ul>
    </div>
</div>

Below is not working without the span label with class input-group-addon

<div class="input-group input-group-sm" style="width:400px">
    <input type="text" class="form-control"  >

    <input type="text" class="form-control"  >
    <div class="input-group-btn">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">Copy pair</a></li>
            <li><a href="#">Paste pair</a></li>
        </ul>
    </div>
</div>

when I remove the middle span then they go below one another.

Any suggestion to fix this??

Upvotes: 0

Views: 1072

Answers (1)

Sachi Tekina
Sachi Tekina

Reputation: 1810

Add a div class row, something like this:

<div class="row">
    <div class="col-lg-6">
        <div class="input-group input-group-sm" style="width:400px">
            <input type="text" class="form-control" />
        </div>
        <!-- /input-group -->
    </div>
    <!-- /.col-lg-6 -->
    <div class="col-lg-6">
        <div class="input-group input-group-sm" style="width:400px">
            <input type="text" class="form-control" />
            <div class="input-group-btn">
                <ul class="dropdown-menu">
                    <li><a href="#">Copy pair</a>

                    </li>
                    <li><a href="#">Paste pair</a>

                    </li>
                </ul>
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span>

                </button>
            </div>
        </div>
        <!-- /input-group -->
    </div>
    <!-- /.col-lg-6 -->
</div>
<!-- /.row -->

Upvotes: 0

Related Questions