How can we add css in print preview?

Question

code:

<style>
  .center {
    float: left;
    text-align: center;
  }
  .center h3 {
    color: #000;
    font-weight: 600;
  }
  .left {
    font-size: 14px;
    float: left;
    width: 30%;
    color: #000;
  }
  .right {
    font-size: 14px;
    float: right;
    width: 70%;
    color: #000;
  }
  #bot {
    margin-bottom: 2em;
  }
  #left {
    font-size: 14px;
    float: left;
    width: 42%;
    color: #000;
  }
  #right {
    font-size: 14px;
    float: right;
    width: 58%;
    color: #000;
  }
  table, td, th {  
    border: 1px solid #000;
    text-align: left;
    font-size: 14px;
    font-weight: inherit;
  }
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    padding: 15px;
  }
  #pp {
    font-size:14px;
    color:#000;
  }
  .table-responsive {
      overflow-x: hidden!important;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding:0px!important;
  }
  </style>
<div class="col-md-12">
  <a href="javascript:void(0)" class="btn btn-success" style="float: right;" onclick='printDiv();'>Print Sheet</a>
</div>
<div id="print_wrapp">
  <div class="col-md-12" id="bot">
    <div class="col-md-2">
      <img src="<?php echo base_url(); ?>uploads/images/Lingayas Vidyapeeth Logo.png" class="img-responsive" style="width: 110px;">
    </div>
    <div class="col-md-10">
      <div class="center">
        <h3>
          Lingaya's Vidyapeeth, Fraidabad<br>
          Award Sheet<br>
          End Semester Examination<br>
          (May-June, 2019)
        </h3>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12" id="bot">
      <div class="col-md-6">
        <div class="left">
          <p>Department: </p>
        </div>
        <div class="right">
          <p><?php echo $award[0]['department_name']?></p>
        </div>

        <div class="left">
          <p>Program/Course: </p>
        </div>
        <div class="right">
          <p><?php echo $award[0]['classes']?></p>
        </div>

        <div class="left">
          <p>Subject Name: </p>
        </div>
        <div class="right">
          <p><?php echo $award[0]['subject']?></p>
        </div>

        <div class="left">
          <p>Session: </p>
        </div>
        <div class="right">
          <p><?php echo $award[0]['session']?></p>
        </div>

      </div>
      <div class="col-md-6">

        <div class="left">
          <p>Semester: </p>
        </div>
        <div class="right">
          <p><?php echo $award[0]['yearsOrSemester']?></p>
        </div>

        <div class="left">
          <p>Subject Code: </p>
        </div>
        <div class="right">
          <p><?php echo $award[0]['subject_code']?></p>
        </div>

        <div class="left">
          <p>Maximum Marks: </p>
        </div>
        <div class="right">
          <p></p>
        </div>

      </div>
    </div>

    <div class="col-md-12" id="bot">
      <div class="col-md-12">
        <div class="table-responsive">
          <table id="example1" class="table table-striped table-bordered table-hover dataTable no-footer">
            <thead>
              <th>S.No.</th>
              <th>Roll No.</th>
              <th>Marks(In Figure)</th>
              <th>Marks(in Words)</th>
            </thead>
            <tbody>
              <?php
                $i=1;
                foreach($award as $row)
                {
              ?>
                  <tr>
                    <td><?php echo $i; ?></td>
                    <td><?php echo $row['roll']; ?></td>
                    <td></td>
                    <td></td>
                  </tr>
              <?php
                $i++;
                }
              ?>
            </tbody>
          </table>
        </div>
      </div>
    </div>


    <div class="col-md-12" id="bot">
      <div class="col-md-6">
        <div id="left">
          <p>Total No. of Student Pass: </p>
        </div>
        <div id="right">
          <p></p>
        </div>
      </div>
      <div class="col-md-6">
        <div id="left">
          <p>Total No. of Student Fail: </p>
        </div>
        <div id="right">
          <p></p>
        </div>
      </div>
    </div>

  </div>
</div>

  <script>
    function printDiv() 
    {
        var divToPrint=document.getElementById('print_wrapp');
        var newWin=window.open('','Print-Window');
        newWin.document.open();
        newWin.document.write('<html><link rel="stylesheet" href="<?php echo base_url(); ?>assets/plugins/bootstrap/css/bootstrap.css" type="text/css" /><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
        newWin.document.close();
        setTimeout(function(){newWin.close();},10);
    }
  </script>

In this code I am simply run print content inside div <div id="print_wrapp"> by click function ie printDiv and its working properly but the problem is that print preview css not showing div content properly and an image is mention below:

and my original page look like:

So, How can I fix this problem? Please help me.

Thank You

Answer 1

You can apply the style sheet too both print and screen using media='screen,print'

<link ../bootstrap.min.css' rel='stylesheet' media='screen,print'>

or

<link ../bootstrap.min.css' rel='stylesheet' media='all'>

Answer 2

When we want to apply some style when printing a page, we need to apply the styles using @media print. Then only the style will apply for windows print function.

Style.css

@media print
{
    .center {
        float: left;
        text-align: center;
      }
      .center h3 {
        color: #000;
        font-weight: 600;
      }
      .left {
        font-size: 14px;
        float: left;
        width: 30%;
        color: #000;
      }
      .right {
        font-size: 14px;
        float: right;
        width: 70%;
        color: #000;
      }
}

Then link the css file where you want to print the page with style.

<link rel="stylesheet" type="text/css" href="Style.css">

Call the Print Function on Button Click

<button onclick="printPage()" class="center">Print</button>

<script>
    function printPage()
    {
        print();
    }
</script>