CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Andy
Andy

Reputation: 5395

Bootstrap bottom align button inside .form-group

I have markup as follows which shows 3 text inputs on a horizontal line

<div class="form-inline">
    <div class="form-group">
        <label>Field 1</label>
        <input id="f1">    
    </div>

    <div class="form-group">
        <label>Field 2</label> 
        <input id="f2">
    </div>

    <div class="form-group">
        <label>Field 3</label>
        <input id="f3">
    </div>
</div>

This works fine but I want a button to the right of "Field 3" which is horizontally aligned with the bottom of the input, #f3.

I've looked at the following but none of these seem to work:

The markup which I've tried adds the button in a 4th .form-group and then I've tried various things on the links above, such as adding .align-bottom to the relevant div.

<div class="form-inline">
    <div class="form-group">
        <label>Field 1</label>
        <input id="f1">    
    </div>

    <div class="form-group">
        <label>Field 2</label> 
        <input id="f2">
    </div>

    <div class="form-group">
        <label>Field 3</label>
        <input id="f3">
    </div>

    <div class="form-group align-bottom">
        <input type="reset" value="Reset" class="align-bottom">
    </div>
</div>

Surely someone wanting the button to be aligned with the bottom of the form elements - in a nice straight line - is a common scenario. So what am I doing wrong and how can I achieve this seemingly simple task?

Upvotes: 6

Views: 12988

Answers (2)

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

This may work. In .form-inline, form-group classes are aligned to the middle, just simply align it to the bottom.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
label{
  display:block;
}
.form-inline .form-group {
  vertical-align:bottom;
}
</style>
<div class="form-inline">
  <div class="form-group">
    <label>Field 1</label>
    <input id="f1">
  </div>

  <div class="form-group">
    <label>Field 2</label>
    <input id="f2">
  </div>

  <div class="form-group">
    <label>Field 3</label>
    <input id="f3">
  </div>

  <div class="form-group align-bottom">
    <input type="reset" value="Reset" class="align-bottom">
  </div>
</div>

Upvotes: 2

Riddler
Riddler

Reputation: 576

Its easy as overriding the rule that is causing the line break, .form-inline behaves this way because of the following code in bootstrap:

.form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}

Trying doing it this way.

<div class="form-group reset-button">
        <input type="reset" value="Reset" class="align-bottom">
</div>

.form-group.reset-button{
display:block;
}

Hope it works

Upvotes: 0

Related Questions