CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mathias
Mathias

Reputation: 605

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,

Upvotes: 0

Views: 283

Answers (1)

Siavas
Siavas

Reputation: 5090

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

Upvotes: 1

Related Questions