CODEWITHSUNDEEP
htmlcssbootstrap-4
Marius
Marius

Reputation: 1759

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

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

Upvotes: 4

Views: 4328

Answers (2)

Anurag Srivastava
Anurag Srivastava

Reputation: 14413

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

body { padding: 1em; }

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>

Upvotes: 8

J4R
J4R

Reputation: 1104

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>

Upvotes: 4

Related Questions