Twitter Bootstrap Question posted in

Bootstrap: Inline form group with label at the top – Twitter bootstrap

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

Tags:

4

Answers


  1. 0

    You can add a style margin-top:24px to the button. I assume this button will eventually have an id or other class to identify it when it’s clicked. From there create a selector in your style sheet and add it there, instead of inline like this example.

    <button style="margin-top:24px;" class="btn btn-primary">Apply</button>

    Login or Signup to reply.
  2. 0

    here you have a jsfiddle if you are not looking to center it with margin. You can add another class to these divs so you don’t change the all default bootstrap style but this is just to show you how you can do it

    .col-xs-7, .col-xs-4{
  display:inline-block;
  float:none;
}
    Login or Signup to reply.
  3. 0

    Here’s a JSFiddle that may help: https://jsfiddle.net/DTcHh/23855/

    I tried to achieve this by not setting any fixed margin so that you can adjust the button size freely.

    So the alignment is done by using javascript as follows:

    $('.pull-down').each(function() {
    var $this = $(this);
    $this.css('margin-top', $this.parent().height() - $this.height() - 15)
});

    The number 15 is added since Bootstrap has a default margin-bottom: 15px for inputs.

    Login or Signup to reply.
  4. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search