Bootstrap: Within .form-inline, label isn't on the same line as its .input-group

[mihaistoie]

Inline forms: Labels of input groups are placed above input fields

Html:

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputAmount">Amount </label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
    </div>
  </div>
  <div class="form-group">
    <label for="exampleInputAmount2">Amount </label>
      <input type="text" class="form-control" id="exampleInputAmount2" placeholder="Amount">
    </div>
  </div>
</form>

https://jsbin.com/jimoli/edit?html,output

OS: win7 64, browsers Firfox/IE/Chrome

[Ap110460]

Not android

[cpeuterbaugh]

+1

[Rosenny08]

Hello mihaistoie. Your only problem is that you are missing an end tag and one end div is in a bad position. Try this:

 <form class="form-inline">
            <div class="form-group">
                <label for="exampleInputAmount">Amount </label>
                <div class="input-group">
                    <div class="input-group-addon">$</div>
                    <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
                </div>

                <div class="form-group">
                    <label for="exampleInputAmount2">Amount </label>
                    <input type="text" class="form-control" id="exampleInputAmount2" placeholder="Amount">
                </div>
            </div>
          </form> 

[cpeuterbaugh]

@Rosenny08 , I ran the code you posted on a blank Bootply with Bootstrap 4.0-alpha and it is not working. Is this something that has been corrected since the 4.0-alpha version that is used on Bootply was put in?

[mihaistoie]

Source of problem:

_input-group.scss

.input-group {
    position: relative;
    width: 100%;    // --> this line
    display: table; 
    border-collapse: separate;
}

Normally the solution is to add :

.form-inline .input-group {
    width: auto;   
}

[Rosenny08]

@cpeuterbaugh I ran the code in a blank file too and it's working for me.

I don't know if it's not compatible with the latest Bootstrap Cause I'm using the previews version.

[Rosenny08]

@mihaistoie your answer is right. Also you can give that parameter to the form-control. And add more:

.form-control {
  height: 10px;
  width: auto;
  display: inline;
  padding: 10px 12px;
}

[mihaistoie]

@Rosenny08 : You are using bootstrap 3.x (bold labels). The issue is for bootstrap 4 alpha-4 not for 3.x.

[Rosenny08]

Ahhhhh. Oh God. My excuses then.

[cpeuterbaugh]

@mihaistoie Thank you so much! And @Rosenny08, thanks for the help as well.

[heikojansen]

In _input-group.scss, lines 5-7 read:

.input-group {
    position: relative;
    width: 100%;

Then in _forms.scss we have lines 322ff (within the rules for .form-inline):

.input-group {
    display: inline-table;
    vertical-align: middle;

    .input-group-addon,
    .input-group-btn,
    .form-control {
        width: auto;
    }
}

So as @mihaistoie said, the problem could be fixed by adding width: auto; to the .form-inline .input-group properties at line 325.

In Bootstrap 3 this apparently wasn´t needed because .input-group did not have a default width: 100%; property - but I don´t know Bootstrap well enough to understand why that has changed in v4.