how to put button near the text box in bootstrap? - css

Question

I already have one row
<div class="row input_section">
<div class="span3">
<h3>Origin</h3>
<p>Where is the orinin of the delivery? Use to calculate price of delivery</p>
</div>
<div class="span9 delivery_section">
<label><div>Address</div>
<input type="text" name="type" value=""/>
</label>
<label>
<button class="btn btn-primary" type="button">Verify</button>
</label>
<label><div style="width:100%;height:150px;border:1px solid black;"></div></label>
</div>
</div>
And I want to do the div size full in the span9 .
So,How can i write it?

Answer 1

straight from the bootstrap docs my friend
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>

Answer 2

Check this jsFiddle
Bootstrap already have class form-inline to set into inline.
Use this in your existing div append this class="form-inline"
Replace this line
<div class="span9 delivery_section">
into
<div class="span9 delivery_section form-inline">
Already i use this, hope this help you!

Answer 3

Try this.
<div class="row input_section">
<div class="span3">
<h3>Origin</h3>
<p>Where is the orinin of the delivery? Use to calculate price of delivery</p>
</div>
<div class="span9 delivery_section">
<label>Address</label>
<div class="input-group">
<input class="form-control" type="text" placeholder="Address">
<div class="input-group-btn">
<button class="btn btn-primary" type="button"> Verify </button>
</div>
</div>
<div style="width:100%;height:150px;border:1px solid black;"></div>
</div>
</div>
If it doesn't seem to work, it probably because I'm using bootstrap 3.

Answer 4

label is inline element. And moreover in bootstrap to accept the width by default they have specified the display property as 'block'. Just override the code by placing the following code. Then you will done with your code.
label {
display:inline-block;
}