[SOLVED] Print Layout on Chrome and Firefox Look Different using PHP Website

I am trying to generate a print command which prints the specific div and have succeeded to run the print command and print the specific layout using default print commands (CTRL + P) and it also runs with button.

The Problem:

Since the layout I am printing is based on bootstrap, it looks different on Chrome and Firefox.

So basically, the chrome is removing the grid system and showing the column in new row (refer screenshot below) whereas, firefox shows the layout fine in print command and in PDF.

I can't figure out what is causing this issue and why the grid is not properly being rendered in print command in Chrome.

Here is the my page code that I am trying to print.

HTML with div that I am trying to print: (the div I am trying to print through ID is: ("print_layout")

    <div id="print_layout">

  <div id="divToPrint" style="">
    <section class="section profile">
      <div class="tab-pane fade show active profile-overview" id="profile-overview">





        <div class="card">
          <div class="card-body pt-3">
            <!-- Bordered Tabs -->
                        <div class="tab-content pt-2">

              <div class="tab-pane fade show active profile-overview" id="profile-overview">

              <div class="row">
                <div class="col-lg-6 col-md-6 "><h1 class="" style="color:#a9313c;font-weight:700;font-size:40px">Vehari Orchard</h1></div>
                <div class="col-lg-6 col-md-6 "><h5 class="" style="">45-WB Road Vehari</h5><h5>Phone: 0313-4691111</h5></div>
              </div>
                 <div class="row">
<div class="col-lg-4 col-md-4 "><h5 class="card-title">Customer Details</h5></div>

                 </div>

<!-- C-000822123456789 -->

                <form name="new_sale" action="" method="post">
                  <div class="row">
                    <div class="col-lg-3 col-md-4 label ">Customer Name </div>
                    <div class="col-lg-9 col-md-8">Ahmad Wahid</div>                  </div>


                  <div class="row">
                    <div class="col-lg-3 col-md-4 label ">Customer CNIC </div>
                    <div class="col-lg-9 col-md-8">123456789</div>                  </div>

                                    <h5 h5="" class="card-title">Second Partner Details</h5>


                  <div class="row">
                    <div class="col-lg-3 col-md-4 label ">Customer Name </div>
                    <div class="col-lg-9 col-md-8">Rabnawaz</div>                  </div>

                  <div class="row">
                    <div class="col-lg-3 col-md-4 label ">Customer CNIC </div>
                    <div class="col-lg-9 col-md-8">9988774455566</div>                  </div>
                                    <h5 class="card-title">Property Details</h5>

                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Plot Number</div>
                    <div class="col-lg-9 col-md-8">22</div>                  </div>

                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Plot Type</div>
                                        <div class="col-lg-9 col-md-8">Commercial</div>
                    
                  </div>

                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Allocation Number</div>
                    <div class="col-lg-9 col-md-8">C-000822123456789</div>                  </div>


<div class="row">
<!-- <div class="col-lg-3 col-md-4 label">Time: </div>
                    <div class="col-lg-9 col-md-8">08:21:24pm</div></div> -->

<div class="row">
<div class="col-lg-3 col-md-4 label">Date: </div>
                    <div class="col-lg-9 col-md-8">17-08-2023</div></div>
                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Plot Price</div>
                    <div class="col-lg-9 col-md-8">RS: 2500000/-</div>                  </div>


                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Advance Received </div>
                    <div class="col-lg-9 col-md-8">RS:
                      500000/-
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Discount</div>
                    <div class="col-lg-9 col-md-8">RS:
                      35500/-
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Payment Method</div>
                    <div class="col-lg-9 col-md-8">
                      Cash                    </div>
                  </div>



                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Payment Plan</div>
                    <div class="col-lg-9 col-md-8">
                      84                    </div>
                  </div>


              </div>




              <!-- <div class="row mb-3">
                <div class="col-sm-10">
                  <button type="submit" class="btn btn-primary" name="submit">Submit Form</button>
                </div>
              </div> -->
              
              </form>

            </div><!-- End Bordered Tabs -->

          </div>
        </div>


    </div></div></section>
  </div>
  </div>

THis is the button that I am using to run the print command:

<button onClick="printdiv('print_layout');" class="btn btn-primary">PRINT</button>

Javascrpipt code to print specific div only:

    <script>
function printdiv(elem) {
  var header_str = '<html><head><title>' + document.title  + '</title></head><body>';
  var footer_str = '</body></html>';
  var new_str = document.getElementById(elem).innerHTML;
  var old_str = document.body.innerHTML;
  document.body.innerHTML = header_str + new_str + footer_str;
  window.print();
  document.body.innerHTML = old_str;
  return false;
}
</script>

What I have tried so far:

Tried adding bootstrap classes in heading of print code but it does not work.
Tried adding inline css to make the grid system work but, it also does not work.

Any leads on what might be causing this layout changes in printscreen layout on Chrome and Firefox?

Thanks!

Screenshots attached (first one shows the original div generated using html, bootstrap and php) and (second screenshot shows the print view of same div using the function whose code is added above, you can clearly see the column name: Customer Name is 1 column and value: Ahmad Wahid is second column in same row but it breaks in PDF/Print View) :

Update about finding: when I switch from portrait to landscape in print command, the layout appears fine so it has something to do with how the bootstrap grid is working in print screen layout.