'Bootstrap: form-group and select height

I am using a ready-made template. In the form I created, the "books" selection box is not the same height as the other boxes. How Can I Solve This?

https://codepen .io/Rheago/pen/oNeEbXG

enter image description here

htmlcssbootstrap-4


Solution 1:[1]

You can add to the select padding on y axis like this but it is not exact.

add py-2 to the class

<select class="form-select py-2" id="kitaplar" 
        name="kitaplar"
       placeholder="Kitap seçiniz..."
      required>
   <option>
      <option>Tester 1</option> 
 </option>
     </select>

or you can change it on the css file but it will not be responsive

Solution 2:[2]

My problem was solved with the following "class".

.formxselect
{
padding-top:.4rem;
padding-bottom:.4rem;
padding-left:1rem;
font-size:1.25rem;
border-radius:.3rem;
}

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 Amit Hagag
Solution 2 Rheago

Related Questions