'Bootstrap5 input-group with btn-group-vertical

As title, I want to create a input-group for number increase/decrease.

This is my code:

    <div class="input-group input-group-sm">
      <input type="text" class="form-control" placeholder="0.9">
      <div class="btn-group-vertical">
        <button class="btn btn-primary btn-sm" type="button">+</button>
        <button class="btn btn-primary btn-sm" type="button">-</button>
      </div>
    </div>

Result

enter image description here

Expected result

enter image description here

htmlcssbootstrap-5


Solution 1:[1]

You need to add py-0 for remove top & bottom padding and lh-1 for decrease line height of button. Your code should be as below:

<div class="input-group input-group-sm">
  <input type="text" class="form-control" placeholder="0.9">
  <div class="btn-group-vertical">
    <button class="btn btn-primary btn-sm py-0 lh-1" type="button">+</button>
    <button class="btn btn-primary btn-sm py-0 lh-1" type="button">-</button>
  </div>
</div>

Solution 2:[2]

add p-0 in button so the code will like this :

<div class="input-group input-group-sm">
  <input type="text" class="form-control" placeholder="0.9">
  <div class="btn-group-vertical">
    <button class="btn btn-primary btn-sm p-0" type="button">+</button>
    <button class="btn btn-primary btn-sm p-0" type="button">-</button>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 HDP
Solution 2 Ilham Naufal

Related Questions