How to place two Bootstrap input groups on the same line?

user_212736 0
Viewed 2034

Desired result: "between X% and Y%", and the input groups, all on the same line.

This works with regular form fields, but not with input-group:

between
<div class="input-group d-inline-block" style="width: 5em;">
  <input type="text" class="form-control" >
  <div class="input-group-append">
    <span class="input-group-text">%</span>
  </div>
</div>
and
<div class="input-group d-inline-block" style="width: 5em;">
  <input type="text" class="form-control" >
  <div class="input-group-append">
    <span class="input-group-text">%</span>
  </div>
</div>

enter image description here

bootstrap-4 css
2 Answers

Use classes d-inline-flex align-items-center w-auto on input-group:

input.form-control {
  width: 3em;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="input-group d-inline-flex align-items-center w-auto">
  between&nbsp;<input type="text" class="form-control">
  <div class="input-group-append">
    <span class="input-group-text">%</span>
  </div>
</div>
<div class="input-group d-inline-flex align-items-center w-auto">
  and&nbsp;<input type="text" class="form-control">
  <div class="input-group-append">
    <span class="input-group-text">%</span>
  </div>
</div>

user_78678220

you could try something like this: 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>



<form class="form-inline">
  <div class="form-group">
    <div class="input-group">
      <label for="between" class="mr-2">between</label>
      <input type="text" class="form-control" id="between" placeholder="">
      <div class="input-group-prepend">
        <div class="input-group-text">%</div>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="input-group">
      <label for="and" class="mr-2 ml-2">and</label>
      <input type="text" class="form-control" id="and" placeholder="">
      <div class="input-group-prepend">
        <div class="input-group-text">%</div>
      </div>
    </div>
  </div>
</form>

user_27206570
Related