How to align bootstrap columns in print page #media print? - php

Question

Bootstrap columns not taking in print page and aligned wrongly how to rectify this issue?
I dont need responsive page but need to align the print page. Can anyone plz help me out?
#media print {
#page {
margin: 2cm;
}
.col-md-1,.col-md-2,.col-md-3,.col-md-4,
.col-md-5,.col-md-6,.col-md-7,.col-md-8,
.col-md-9,.col-md-10,.col-md-11,.col-md-12 {
float: left;
}
.col-md-1 {
width: 8%;
}
.col-md-2 {
width: 16%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33%;
}
.col-md-5 {
width: 42%;
}
.col-md-6 {
width: 50%;
float: left;
}
.col-md-7 {
width: 58%;
}
.col-md-8 {
width: 66%;
}
.col-md-9 {
width: 75%;
}
.col-md-10 {
width: 83%;
}
.col-md-11 {
width: 92%;
}
.col-md-12 {
width: 100%;
}
}
HTML PAGE
[<div class="container border border-dark" id="container">
<div class="row">
<div style="font-size:25px; font-weight:bold; text-decoration: underline;" class="col-md-10">KERCHANSHE TRADING PLC
<div style="font-size:15px;margin-right: 5px;margin-left: 34px;"><i class="fa fa-mobile" style="font-size:18px;margin-right: 5px;" aria-hidden="true"></i> 091 121 2436
<i class="fa fa-phone" style="font-size:18px;margin-right: 5px;margin-left: 31px;" aria-hidden="true"></i> 011 371 6370</div>
<div style="font-size:15px;margin-left: 80px;">Addis Ababa, Ethiopia</div>
</div>
<div style="font-size:20px; font-weight:bold; border: 1px solid black;text-align: center;height: min-content;"
class="col-md-2 border border-dark">ORIGNAL</div>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="MinVal">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="MaxVal">
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-4" style="margin-left: 18px;">
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">Cert. No</span>
</div>
<input type="text" id="cert1_no" class="form-control input-sm" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-4" style="margin-left: 18px;">
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">Addis Ababa</span>
</div>
<input type="text" id="addis_ababa" class="form-control input-sm" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
</div>
</div>
<div class="row">
<div class="col-xl-5 col-lg-6 col-md-8 col-sm-10 mx-auto text-center form p-4">
<span style="font-size:30px; font-weight:bold; text-decoration: underline;">CERTIFICATE</span>
</div>
</div>
<span style="font-size:20px; text-decoration: underline;margin-left: 19%;">
<b>CERTIFICATE OF CLEANLINESS AND GRADE OF ETHIOPIAN COFFEE</b>
</span><br/><br/>
<div class="row">
<div class="col-md-3">
<input name="origin" type="text" class="form-control" id="origin_cert1"/>
<span style="">(Origin)</span>
</div>
<div class="col-md-9">
<span class="pull-right"> <input name="grade" type="text" class="form-control" id="grade_cert1"/>
<span style="">(Grade)</span>
</span>
</div>
</div>
<br>
<div style="font-size:15px;">
<p style="text-align: center;font-weight: 700; font-size: 18px;">Description of Lot</p>
<table class="table tablecert1 table-bordered">
<tr>
<th colspan="4" style="text-align: center;">BAGS</th>
</tr>
<tr>
<th rowspan="2" style="text-align: center;">No</th>
<th colspan="2" style="text-align: center;">Weight</th>
<th rowspan="2" style="text-align: center;">Mark</th>
</tr>
<tr>
<th style="text-align: center;">Gross</th>
<th style="text-align: center;">Net</th>
</tr>
<tr>
<td><input style="" id="no_1" class="form-control no" type="text"></td>
<td><input style="" id="gross_1" class="form-control gross" type="text"></td>
<td><input style="" id="net_1" class="form-control net" type="text"></td>
<td><input style="" id="mark_1" class="form-control mark" type="text"></td>
</tr>
<tr>
<td><input style="" id="no_2" class="form-control no" type="text"></td>
<td><input style="" id="gross_2" class="form-control gross" type="text"></td>
<td><input style="" id="net_2" class="form-control net" type="text"></td>
<td><input style="" id="mark_2" class="form-control mark" type="text"></td>
</tr>
<tr>
<td><input style="" id="no_3" class="form-control no" type="text"></td>
<td><input style="" id="gross_3" class="form-control gross" type="text"></td>
<td><input style="" id="net_3" class="form-control net" type="text"></td>
<td><input style="" id="mark_3" class="form-control mark" type="text"></td>
</tr>
<tr>
<td><input style="" id="no_4" class="form-control no" type="text"></td>
<td><input style="" id="gross_4" class="form-control gross" type="text"></td>
<td><input style="" id="net_4" class="form-control net" type="text"></td>
<td><input style="" id="mark_4"class="form-control mark" type="text"></td>
</tr>
<tr>
<td><input style="" id="no_5" class="form-control no" type="text"></td>
<td><input style="" id="gross_5" class="form-control gross" type="text"></td>
<td><input style="" id="net_5" class="form-control net" type="text"></td>
<td><input style="" id="mark_5" class="form-control mark" type="text"></td>
</tr>
<tr>
<td><input style="" id="no_6" class="form-control no" type="text"></td>
<td><input style="" id="gross_6" class="form-control gross" type="text"></td>
<td><input style="" id="net_6" class="form-control net" type="text"></td>
<td><input style="" id="mark_6" class="form-control mark" type="text"></td>
</tr>
</table>
</table>
</div>
<div class="row">
<div class="input-group mb-1 col-md-6">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Driver's Name</span>
</div>
<input type="text" class="form-control" id="driversname" aria-label="Username" aria-describedby="basic-addon1">
</div>
</div>
<div class="row">
<div class="input-group mb-1 col-md-6">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Truck Plate No.</span>
</div>
<input type="text" class="form-control" id="truckplateno" aria-label="Username" aria-describedby="basic-addon1">
</div>
</div>
<div class="row">
<div class="input-group mb-1 col-md-6">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Trailer No.</span>
</div>
<input type="text" class="form-control" id="trailerno" aria-label="Username" aria-describedby="basic-addon1">
</div>
</div>
<div class="row">
<div class="input-group mb-1 col-md-6">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Container No.</span>
</div>
<input type="text" class="form-control" id="containerno" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="form-inline">
<label for="exampleInputEmail1" style="MARGIN-LEFT: 50PX;font-weight: 700;text-decoration:overline;">KERCHANSHE TRADING PLC</label>
</div>
</div>
<div class="row">
<div class="input-group mb-1 col-md-6">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Seal No.</span>
</div>
<input type="text" class="form-control" id="sealno" aria-label="Username" aria-describedby="basic-addon1">
</div>
</div><br>
<div class="row">
<div class="form-group form-inline">
<label for="exampleInputEmail1" style="MARGIN-LEFT: 550PX;font-weight: 700;text-decoration:overline;">Signature of Licensed Coffee Cleaners & Graders</label>
</div>
</div>
</div>][1]
I have attached my print page please find it. And suggest me where i have to change the code in media print in css??
Actually the page should like this
real page should be like this
print wrong page looks like
print page
function printDiv_kerch() {
var divToPrint = document.getElementById('container');
var newWin = window.open('', 'Print-Window', '');
newWin.document.open();
newWin.document.write('<html><head>');
newWin.document.write('<link rel="stylesheet" type="text/css" media="print" href="http://localhost/verbat/css/certi.css"></head>');
newWin.document.write('<link rel="stylesheet" type="text/css" media="print" href="http://localhost/verbat/bootstrap-4.3.1-dist/bootstrap.min.css"></head>');
newWin.document.write('<body style="" onload="window.print();window.close();">' + divToPrint.innerHTML + '');
newWin.document.write('</body></html>');
newWin.document.close();
setTimeout(function() {
newWin.close();
}, 500);
}