Find out how the height of a button was set - html

Question

My code (full version):
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-8 p-0">
<form class="form-group">
<form>
<input type="text" class="form-control w-100 pr-0 mr-0" id="quick-add-task-control-text-area" placeholder="Task name">
</form>
</form>
</div>
<div class="col-4 p-0">
<button type="button" class="btn btn-secondary w-100 h-100 ml-0" id="schedule-button">Schedule</button>
</div>
</div>
</div>
<div class="modal-footer d-flex flex-row justify-content-start pl-0">
<button type="button" class="btn btn-primary btn-sm" id="add-task-modal-save">Save changes</button>
<div class="input-group mb-0 w-50">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelectPriority">Priority</label>
</div>
<select class="custom-select" id="inputGroupSelectPriority">
<option selected>Choose...</option>
<option value="Low">Low</option>
<option value="Medium">Medium</option>
<option value="High">High</option>
</select>
</div>
</div>
</div>
</div>
</div>
After opening my modal on the navbar ("+" icon), I wanted the height of my input-group to be the same height as my "save changes" button on the left. After inspecting its styles (of the 'save button' I could not understand how it's height was calculated. I did not find any em or rem, or any reference to the parent element like the bootstrap class "h-100". So I had to do it using the height property and pixels, which I know is a terrible way of doing it.
So my question is, how do I set the height of my input-group element in the proper responsive-friendly way?
(For the modal footer I didn't set a container and a row and columns as I did in the modal body, is that terrible?)

Answer 1

The button's height is not explicitly set by Bootstrap, it's automatically calculated from the size of the content plus its margin, padding and border. The custom select's height, however, is explicitly set, so there is not a way to make it smaller without explicitly overriding that, as well as the properties on the label, unfortunately.
The way you're doing it is not really that bad, just indicative of what, in my opinion, is Bootstrap's biggest drawback: that if you need to even moderately customize your styles, you'll end up fighting and overriding its CSS for much longer than you save by making use of its grid system, though some of the components are quite useful. You may just want to use a custom input element you style yourself, that way you can use flexbox to have it size up automatically.
Otherwise if you add h-100 to the select element it should be what you're looking for. Note that if you do shrink the select's height, you will also need to override its padding and/or font size to prevent the text from being cut off.

Answer 2

In projects using Bootstrap, any element with d-flex is a flexbox container, making the immediate child elements flex items.
Flexbox can drastically change the height of items when flex-direction equals row, which is the default. The items will naturally take up the height of the flexbox container.
Applying a fixed height to items might help but in this circumstance it might just be easier to add a wrapper div around elements like <select> and <button> that are being effected in this way by a flexbox container. That way the wrapper you added can have its height changed by the flexbox container, but the <select> inside keeps its natural height.
Awesome resource about how flexbox works.