how to decrease modal header default height in bootstrap 4

Question

I want to decrease bootstrap 4 modal default height and width . For this purpose , I have written the following code :

<div class="modal-header" style="background-color: darkblue;color:#fff;height:5%;!important">
  <p class="mx-auto d-block">Please Give Your Finger</p>  
</div>

I have set the height of modal header to 5% . But the height is same as default . How can I decrease the bootstrap modal header height ?

Answer 1

Bootstrap 4's default modal-header does not have a height, it's padded out to be content appropriate (you can see this from the Developer Tools in your browser):

.modal-header {
    // ..
    padding: 1rem;
}

Simply adjust the padding as necessary on the element, rather than trying to set height.

As an aside, I'd suggest using a header (since that's what it is) for your title text, rather than a paragraph.

<div class="modal-header pt-reduced pb-reduced">
     <h5 class="modal-title">Please give your finger</h5>
</div>

(where .pt-reduced and .pb-reduced are classes appropriate for reducing the padding on the top and bottom respectively)