CODEWITHSUNDEEP
htmltwitter-bootstrap
DJack
DJack

Reputation: 639

Second span going in new line

So I have a strange problem with Bootstrap span.

I have an input text with two spans. But the second span is going to new line. Here is an example:

<div class="col-md-6" style="width:50%;margin-bottom: 10px">        
<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="glyphicon glyphicon-search"></span>
</div>          
</div>

JsFiddle example

How to make the second span stay in the same line?

Upvotes: 0

Views: 291

Answers (1)

gkempkens
gkempkens

Reputation: 460

Just add the input-group-addon class to your second span.

<div class="col-md-6" style="width:50%;margin-bottom: 10px"> 
    <div class="input-group">
        <span class="input-group-addon">$</span>
        <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
        <span class="input-group-addon glyphicon glyphicon-search"></span>
    </div>
</div>

The only problem is that the glyphicon has a top:1px style which gives you an offset of 1 pixel. Just override that in your css.

Upvotes: 1

Related Questions