CODEWITHSUNDEEP
csshtmltwitter-bootstraptwitter-bootstrap-3
Stanley Tan
Stanley Tan

Reputation: 433

How can I make all these onto 1 line with Bootstrap 3?

What I have done here is use the standard Bootstrap grid system of .col-md-5 and .col-md-7 under .row to place all the element on 1 row but I can't seem to make it work.

Another thing is the element keeps getting pulled down to another line below the input.

<div class='col-md-12'>
    <div class='row'>
       <div class='col-md-5'>
          <select class='form-control'>
            <option value='us'>USA</option>
          </select>
        </div>
        <div class='col-md-7'>
          <span class="" style="display: inline">
             <span class="input-group">
                <span class="input-group-addon">
                   ZIP/Postal code
                </span>
                <input class="form-control" type="text">
             </span>
             <a href='#' class=''>
                cancel
             </a>
          </span>
       </div>
    </div>
</div>

How can I put all these onto 1 line? Here's a jsfiddle for it: http://jsfiddle.net/2656xt63/

Upvotes: 1

Views: 112

Answers (1)

ChaoticNadirs
ChaoticNadirs

Reputation: 2290

There's nothing wrong with your bootstrap column classes, but the elements will only appear side by side on md screen widths (>= 992px). The fiddle panel is narrower than that so the elements are stacked.

If you use col-xs-* the elements will appear side by side at all times.

Alternatively, for a small form such as this, you could use an inline form:

  <form class="form-inline" role="form">
    <div class="form-group">
      <label class="sr-only" for="country">Country</label>
      <select class='form-control' id="country">
        <option value='us'>USA</option>
      </select>
    </div>
    <div class="form-group">
      <span class="input-group">
        <span class="input-group-addon">
          ZIP/Postal code
        </span>
        <input class="form-control" type="text">
      </span>
    </div>
    <div class="form-group">
      <a href="#" class="btn btn-default">
        cancel
      </a>
    </div>
  </form>

Here's a bootply demonstrating the inline form.

Upvotes: 2

Related Questions