6

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?

Community
  • 1
  • 1
Andy
  • 5,142
  • 11
  • 58
  • 131

2 Answers2

2

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>
Abhishek Pandey
  • 13,302
  • 8
  • 38
  • 68
0

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

Riddler
  • 566
  • 2
  • 10
  • Thanks for this but unfortunately this makes the button appear on the line *below* the 3 inputs. I'm looking to keep everything on one line, but have the button rendered in alignment with the bottom of each of the inputs on the same horizontal line. – Andy Feb 20 '17 at 10:57
  • You want it on same line but on the bottom , i am like totally confused. Try a wireframe maybe to depict what you want. Are you saying you want 3 buttons below each input. – Riddler Feb 20 '17 at 11:01
  • I've accepted an answer that works. Run that link with the sample code, but make sure you run it in a new window/tab (SO shows it inside a div that's too narrow) to see the desired effect. – Andy Feb 20 '17 at 11:03
  • 2
    Oh right, but don't override default bootstrap classes like mentioned in that. Create a new class specific for your scenario. – Riddler Feb 20 '17 at 11:09
  • The block of markup in `.form-inline` also has an ID which I removed to keep the post simple. I'll use the rules supplied but target them within that ID. Good point though. – Andy Feb 20 '17 at 11:10