htmltwitter-bootstrap

Bootstrap multiple labels and input on same line


I am trying to place two labels and two inputs on the same line. Is this even possible?

I want it to look like this all on the same line:

[Label][Input][Button] WhiteSpace [Label2][Input2]

What I have so far

   <form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
      <span class="input-group-btn ">
         <button type="button" class="btn" data-ng-click="click()">...</button>
       </span>
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword">Password</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="Password">
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox"> Remember me
      </label>
      <button type="submit" class="btn">Sign in</button>
    </div>
  </div>
</form>

Solution

  • use Bootstrap form-inline & custom-control-inline classes.

    <form class="form-horizontal">
                <div class="form-inline">
                    <div class="control-group custom-control-inline">
                        <label class="col-sm-2 col-form-label" for="inputEmail">Email</label>
                        <div class="controls">
                            <input type="text" id="inputEmail" placeholder="Email" />
                            <span class="input-group-btn ">
                                <button type="button" class="btn" data-ng-click="click()">...</button>
                            </span>
                        </div>
                    </div>
                    <div class="control-group custom-control-inline">
                        <label class="control-label" for="inputPassword">Password</label>
                        <div class="controls">
                            <input type="password" id="inputPassword" placeholder="Password" />
                        </div>
                    </div>
                    <div class="control-group">
                        <div class="controls form-check-inline">
                            <label class="checkbox">
                                <input type="checkbox" />
                                Remember me
                            </label>
                            <button type="submit" class="btn">Sign in</button>
                        </div>
                    </div>
                </div>
            </form>