Reputation: 63
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
Reputation: 8366
This is what I did:
<div class="container-fluid">
<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>
Upvotes: 1
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