CODEWITHSUNDEEP
htmlcssbootstrap-5
EEEEH
EEEEH

Reputation: 779

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

Upvotes: 0

Views: 350

Answers (2)

HDP
HDP

Reputation: 4221

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>

Upvotes: 1

Ilham Naufal
Ilham Naufal

Reputation: 61

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>

Upvotes: 0

Related Questions