'improve print page in css - print 4 div pre page

I creating list of orders to print in admin. I use bootstrap 5 to handle styles and I want to print 4 order in pre page

But as you can see, orders are not properly divided into 4 in pre page when printing.

enter image description here

Help me to figure this problem and fix it You can see my html and css code.

I try page-break-inside:avoid; to my elements, but this isn't work

.print-row .col-sm-6 .border {
    min-height: 44.5vh
}

* {
    direction: rtl;
}

.print-row .col-sm-6 .border * {
    margin-bottom: 3px;
    margin-top: 0;
}

hr {
    display: block;
    height: 1px;
    background: transparent;
    width: 100%;
    border: none;
    border-top: solid 1px #aaa;
}

.text-end {
    text-align: left !important;
}

@page: footer {
    display: none
}

@page: header {
    display: none
}

@page {
    size: landscape;
    margin: 0;
}
<link rel="stylesheet" id="bootstrap-5-css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css?ver=5.9.2" media="all">
<div class="container-fulid px-3">
  <div class="row gx-3 print-row">

    <div class="col-sm-6 mt-3">
     <div class="p-1 border bg-light">
       <p class="text-center"><strong>فرستنده</strong></p>
       <p><strong>(نام):</strong> محمد یزدانی ادیت - <strong>کدملی</strong>: 056555556665</p>
       <p><strong>(آدرس):</strong> تهران پلاک 1 ادیت</p>
       <p><strong>(تلفن):</strong> ui ادیت</p>
       <p><strong>(کد پستی):</strong> ادیت</p>
       <hr>
       <p class="text-center"><strong>گیرنده</strong></p>
       <p><strong>(نام):</strong> تست جدید فامیلی - <strong>تلفن:</strong> 09367623982</p>
       <p><strong>(کد پستی):</strong> 980018965</p>
       <p><strong>(آدرس):</strong>تهران - تهران خیابان الف - </p>
       <p><strong>(پکیج درخواستی):</strong> test - بنفش - تعداد: 1</p>
      </div>
    </div>
        <div class="col-sm-6 mt-3">
     <div class="p-1 border bg-light">
       <p class="text-center"><strong>فرستنده</strong></p>
       <p><strong>(نام):</strong> محمد یزدانی ادیت - <strong>کدملی</strong>: 056555556665</p>
       <p><strong>(آدرس):</strong> تهران پلاک 1 ادیت</p>
       <p><strong>(تلفن):</strong> ui ادیت</p>
       <p><strong>(کد پستی):</strong> ادیت</p>
       <hr>
       <p class="text-center"><strong>گیرنده</strong></p>
       <p><strong>(نام):</strong> محمد یزدانی  - <strong>تلفن:</strong> </p>
       <p><strong>(کد پستی):</strong> </p>
       <p><strong>(آدرس):</strong> -  - </p>
       <p><strong>(پکیج درخواستی):</strong> محصول تستی اول - تعداد: 1</p>
      </div>
    </div>
        <div class="col-sm-6 mt-3">
     <div class="p-1 border bg-light">
       <p class="text-center"><strong>فرستنده</strong></p>
       <p><strong>(نام):</strong> محمد یزدانی ادیت - <strong>کدملی</strong>: 056555556665</p>
       <p><strong>(آدرس):</strong> تهران پلاک 1 ادیت</p>
       <p><strong>(تلفن):</strong> ui ادیت</p>
       <p><strong>(کد پستی):</strong> ادیت</p>
       <hr>
       <p class="text-center"><strong>گیرنده</strong></p>
       <p><strong>(نام):</strong> علی محمد 2 - <strong>تلفن:</strong> 09101498738</p>
       <p><strong>(کد پستی):</strong> بدون کد پستی</p>
       <p><strong>(آدرس):</strong>تهران - تهران پلاک 2 - </p>
       <p><strong>(پکیج درخواستی):</strong> محصول تستی اول - تعداد: 1</p>
      </div>
    </div>
        <div class="col-sm-6 mt-3">
     <div class="p-1 border bg-light">
       <p class="text-center"><strong>فرستنده</strong></p>
       <p><strong>(نام):</strong> محمد یزدانی ادیت - <strong>کدملی</strong>: 056555556665</p>
       <p><strong>(آدرس):</strong> تهران پلاک 1 ادیت</p>
       <p><strong>(تلفن):</strong> ui ادیت</p>
       <p><strong>(کد پستی):</strong> ادیت</p>
       <hr>
       <p class="text-center"><strong>گیرنده</strong></p>
       <p><strong>(نام):</strong> علی محمد - <strong>تلفن:</strong> 09101498738</p>
       <p><strong>(کد پستی):</strong> 9800187650</p>
       <p><strong>(آدرس):</strong>تهران - تهران پلاک 2 - </p>
       <p><strong>(پکیج درخواستی):</strong> محصول تستی اول - تعداد: 1</p>
      </div>
    </div>
     
  </div>
</div>
javascripthtmlcss


Solution 1:[1]

Try this link

<style>
@media print
{
h1 {page-break-before:always}
}
</style>

Hope this helps

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 Rahil Siddique

Related Questions