input-group + <input type=color> doesn't use whole height

[ChrisHSandN]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

An input-group combined with <input type="color"> does not style correctly and leaves a gap between the bottom of the input compared to the height of the input-group-text.

Reduced test cases

<div class="input-group mb-3">
  <span class="input-group-text">text</span>
  <input type="text" class="form-control">
</div>

<div class="input-group mb-3">
  <span class="input-group-text">color</span>
  <input type="color" class="form-control">
</div>

Testcase: https://jsfiddle.net/chris_h/k4cdfw2e/

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.2.3

[louismaximepiton]

Hey there,

I think you're not using it right here. The <input type="color"> is missing the class .form-control-color as mentioned here.
So the following code should work fine:

<div class="input-group mb-3">
  <span class="input-group-text">text</span>
  <input type="text" class="form-control">
</div>

<div class="input-group mb-3">
  <span class="input-group-text">color</span>
  <input type="color" class="form-control form-control-color">
</div>

I don't have any issue after that. Can you confirm ?

[ChrisHSandN]

Ah my bad, I hadn't spotted the form-control-color class. Closing as that resolves the issue.

Many thanks 👍