Ashan Lakshith
Ashan Lakshith

Reputation: 63

How can I add a button with text field in Bootstrap?

I have the code that I have written in below,But I want a add a button with text field without gap of this button and text field. How should I change this code?

<div class="panel panel-default">
<div class="panel-footer">

        <form>
            <div >
                <input id="address" type="email" placeholder="Add your email address" class="form-control" >
                <button class="btn btn-default" type="button" id="addressSearch" style="background-color:#8c6666 "><font color="#ffffff" >Subscribe</font></button>

            </div>

        </form>     
</div>

Upvotes: 2

Views: 1868

Answers (2)

Ahs N
Ahs N

Reputation: 8366

This is what I did:

<div class="container-fluid">&nbsp;
    <div class="row">
        <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-footer">
                    <div class="input-group">
                        <input id="address" type="email" placeholder="Add your email address" class="form-control" /> <span class="input-group-btn">
        <button class="btn btn-warning" type="button" id="addressSearch">Subscribe</button>
      </span>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Here is JSfiddle demo

Upvotes: 1

ichadhr
ichadhr

Reputation: 644

try this

<div class="panel panel-default">
    <div class="panel-footer">
        <form>
            <div class="input-group">
                <input id="address" type="email" placeholder="Add your email address" class="form-control">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button" id="addressSearch" style="background-color:#8c6666 "><font color="#ffffff" >Subscribe</font></button>
                </span>
            </div>
        </form>
    </div>
</div>

You should read docs input-group

Upvotes: 0

Related Questions