CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
CaptSaltyJack
CaptSaltyJack

Reputation: 16045

Inline form elements within non-inline form in Bootstrap 3?

Is it possible to have certain form elements within a Bootstrap form be inline, while the rest are not?

In my form, I want to make everything take up the full 6 columns, except city, state, and ZIP should occupy a single line. See code below:

<form id="main-form" role="form">
  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        <label for="bill-name">Name</label>
        <input type="text" class="form-control" id="bill-name"
        placeholder="Full name">
      </div>
      <div class="form-group">
        <label for="bill-company">Company</label>
        <input type="text" class="form-control" id="bill-company"
        placeholder="Company name">
      </div>
      <div class="form-group">
        <label for="bill-address1">Address</label>
        <input type="text" class="form-control" id="bill-address1"
        placeholder="Street address">
      </div>
      <div class="form-group">
        <label for="bill-address2">Address 2</label>
        <input type="text" class="form-control" id="bill-address2"
        placeholder="Suite, building number, etc.">
      </div>
      <div class="form-group">
        <label for="bill-city">City</label>
        <input type="text" class="form-control" id="bill-city"
        placeholder="City">
      </div>
      <div class="form-group">
        <label for="bill-state">State</label>
        <input type="text" class="form-control" id="bill-state"
        placeholder="State">
      </div>
    </div>
  </div>
</form>

Upvotes: 1

Views: 1156

Answers (1)

isherwood
isherwood

Reputation: 61083

That's the beauty of the nestable grid. The result isn't truly inline, but I think it's more effective. 

<div class="row">
    <div class="form-group col-sm-6">
        <label for="bill-city">City</label>
        <input type="text" class="form-control" id="bill-city" placeholder="City">
    </div>
    <div class="form-group col-sm-6">
        <label for="bill-state">State</label>
        <input type="text" class="form-control" id="bill-state" placeholder="State">
    </div>
</div>

Fiddle

Note that this only applies to sm and above screen widths. You could change the class to col-xs-6 to go all the way down with it.

Upvotes: 3

Related Questions