migu migu - 3 months ago 17
HTML Question

Bootstrap: Inline form group with label at the top

I have a normal form (Twitter Bootstrap, not inline) but one input field has a button next to it (see pic below). All input fields have a label at the top.

What is the proper Bootstrap syntax (preferably without having to add my own CSS) to have an inline form group (input field and button next to it) with a label that's not inline (i.e. sits above the input field)?

<form>
<div class="form-group">
<label for="mobile">Mobile</label>
<input type="text" class="form-control" />
</div>
<div class="row">
<div class="col-xs-8">
<div class="form-group">
<label for="coupon">Coupon</label> <!-- should behave like the other non-inlined form fields -->
<input type="text" class="form-control" />
</div>
</div>
<!-- should be inline aligned with the input field -->
<div class="col-xs-4">
<button class="btn btn-primary">Apply</button>
</div>
</div>
</form>


Screenshot

Answer

You could use the input-group class Bootstrap already provides.

Like this:

jsFiddle


CODE SNIPPET:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<main class="container">
  <form>
    <div class="form-group">
      <label for="mobile">Mobile</label>
      <input type="text" class="form-control" />
    </div>
    <div class="form-group">
      <label for="coupon">Coupon</label>
      <!-- should behave like the other non-inlined form fields -->
      <div class="input-group">
        <input type="text" class="form-control" />
        <span class="input-group-btn">
        <button class="btn btn-primary" type="button">Apply</button>
      </span>
      </div>
    </div>
  </form>