Background color not filling full entire row height when using my-auto

Question

I have a boot-strap row where a i want the first column to have blue background and text to be centered vertically and horizontaly.

If I don't center text horizontally it works HTML

 <div class = "shadow p-3 mb-5 bg-white rounded" style="padding: 0 !important;">
    <div class="container">
            <div class="row main-row">
                <div class="col-2 booking-flight-info-dir text-center   " style="">
                        <img  src="<?= plugin_dir_url( __DIR__ ).'/img/out_flight_icon.png'?>" alt="out_flight_icon.png" style="padding-left:10px " >
                        <span >תיסת הלוך</span>
                </div>
                <div class="col-2 booking-flight-info-flightnum text-center  my-auto" style="">
                <span>טיסה מספר:</span><BR>
                <span style="font-size: x-large;font-weight: bold;text-align: center"><?= $rowData->outTrip->flightNmr?></span>
                </div>
            </div>
        </div>
</div>

without my-auto

However once I add my-auto to center tex horizontally, the background color is don't fill entire row-height, only the area of the text.

<div class = "shadow p-3 mb-5 bg-white rounded" style="padding: 0 !important;">
<div class="container">

        <div class="row main-row">

            <div class="col-2 booking-flight-info-dir text-center my-auto " style="">
                    <img  src="<?= plugin_dir_url( __DIR__ ).'/img/out_flight_icon.png'?>" alt="out_flight_icon.png" style="padding-left:10px " >
                    <span >תיסת הלוך</span>
            </div>

            <div class="col-2 booking-flight-info-flightnum text-center  my-auto" style="">
            <span>טיסה מספר:</span><BR>
            <span style="font-size: x-large;font-weight: bold;text-align: center"><?= $rowData->outTrip->flightNmr?></span>
            </div>
        </div>

    </div>


</div>

with my-auto

Answer 1

Solved it like this

<div class="shadow p-3 mb-2 bg-white rounded" style="padding: 0 !important;">
            <div class="card">
                <div class="row main-row  ">
                    <div class="col-md-4">
                    <div class="row flight-num-row h-100 ">
                        <div class="col booking-flight-info-dir text-center d-table" style="">
                        <div class="d-table-cell align-middle">
                            <img src="<?= plugin_dir_url(__DIR__) . '/img/out_flight_icon.png' ?>" alt="out_flight_icon.png"
                                 style="padding-left:10px ">
                            <span>טיסת הלוך</span>
                        </div>
                    </div>

                    <div class="col booking-flight-info-flightnum text-center   d-table" style="line-height: 1">
                         <div class="d-table-cell align-middle">
                        <span>טיסה מספר:</span><BR>
                        <span style="font-size: x-large;font-weight: bold;text-align: center;"><?= $rowData->outTrip->airline . ' ' . $rowData->outTrip->flightNmr ?></span>
                         </div>
                    </div>