Mathias Mathias - 1 month ago 9
CSS Question

How to ensure Bootstrap button stays in-line with form field within the same column?

Supposedly a rather simple question, but I would appreciate some tips all the same.

I have the following Bootstrap html:

<div class="col-xs-6 col-md-3">

<div class="form-group">
<input autocomplete="off" autofocus="" class="form-control" name="Quantity" placeholder="Quantity required" type="text" id="quantity">
</div>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" id="touch" type="button" data-toggle="dropdown">grams
<span class="caret"></span></button>
<ul class="dropdown-menu" id="menu">
<li><a href="#">milligrams</a></li>
<li><a href="#">grams</a></li>
<li><a href="#">kilograms</a></li>
</ul>
</div>
</div>


However, currently as shown here: http://www.bootply.com/xlkInfMjJo
the button always seems to sit below the input field. Is there a way to get around this and ensure the button stays in-line with the form field within the same column?

Kind Regards,

Answer

Yes, this can be achieved by having additional columns for the button and input field, which needs to be wrapped in a .row

So, you only need to change from:

<div class="col-xs-6 col-md-3"> 
     <div class="form-group">
       <input autocomplete="off" autofocus="" class="form-control" name="Quantity" placeholder="Quantity required" type="text" id="quantity">
     </div>        
     <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" id="touch" type="button" data-toggle="dropdown">grams
        <span class="caret"></span></button>
      <ul class="dropdown-menu" id="menu">
        <li><a href="#">milligrams</a></li>
        <li><a href="#">grams</a></li>
        <li><a href="#">kilograms</a></li>
      </ul>
    </div>
</div>

To:

<div class="col-xs-6 col-md-3">
    <div class="row">
       <div class="form-group col-xs-8">
         <input autocomplete="off" autofocus="" class="form-control" name="Quantity" placeholder="Quantity required" type="text" id="quantity">
       </div>        
       <div class="dropdown col-xs-4">
        <button class="btn btn-primary dropdown-toggle" id="touch" type="button" data-toggle="dropdown">grams
          <span class="caret"></span></button>
        <ul class="dropdown-menu" id="menu">
          <li><a href="#">milligrams</a></li>
          <li><a href="#">grams</a></li>
          <li><a href="#">kilograms</a></li>
        </ul>
      </div>
    </div>
</div>

This way, the input field will always take 8 units of the width, whereas the button will take 4 - using the default Bootstrap grid system (12 total units).

Would you want to change this ratio, change the .col-xs-* classes newly inserted to your preferred values.

You can also view these changes in this Bootply snippet: http://www.bootply.com/ufUHQgp9bj

Comments