title: Print modal content without changing the style
body: <p>I have a modal with some data on it and I need to print it exactly like it is on the modal. I have some JavaScript to print the div where the content is but the problem is the bootstrap classes don't get recognized during the print and so the entire layout changes.</p>
  
  <pre><code>    function printDiv() {
        var winPrint = window.open();
        /*var header = '@include("report/header")';*/
        /*var body = '@include("memberpayment/monthlybill")';*/
        var body = document.getElementById('printarea').innerHTML;
        winPrint.document.write(body);
        winPrint.document.close();
        winPrint.focus();
        winPrint.print();
        winPrint.close();
  }
  </code></pre>
  
  <p>my modal:<a href="https://i.stack.imgur.com/uR5pN.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uR5pN.jpg" alt="enter image description here"></a></p>
  
  <p>my print view:
  <a href="https://i.stack.imgur.com/3Xysd.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3Xysd.jpg" alt="enter image description here"></a></p>
  
  <p>From searching online it seems I need to include the bootstrap library before I write the print content (<a href="https://stackoverflow.com/questions/22623455/bootstrap-style-no-applying-to-print">source</a>)</p>
  
  <p>This did not work for me as when I write a file before it gives a blank 2 pages on my print view.  I've tried using the jQuery plugin <a href="https://stackoverflow.com/questions/12302819/how-to-create-a-printable-twitter-bootstrap-page">printThis</a></p>
  
  <p><a href="https://stackoverflow.com/questions/12302819/how-to-create-a-printable-twitter-bootstrap-page">4</a>: <a href="https://www.jqueryscript.net/other/Customizable-Multiple-Elements-Printing-Plugin-With-jQuery-printThis.html" rel="nofollow noreferrer">https://www.jqueryscript.net/other/Customizable-Multiple-Elements-Printing-Plugin-With-jQuery-printThis.html</a> which also did not work out.</p>
  
  <p><a href="https://stackoverflow.com/questions/12302819/how-to-create-a-printable-twitter-bootstrap-page">in this question</a>it seems adding a media="print" to the link seemed to work aswell but it didn't work for me.</p>
  
  <p>This is my Modal code:</p>
  
  <pre><code>    &lt;div class="container-fluid" id="printarea" style="padding: 2rem 4rem;"&gt;
      &lt;!-- ----------------------top heading part---------------------- --&gt;
      &lt;div class="row" style="border: 1px solid black;"&gt;
          &lt;div class="col-md-4 center"&gt;
              @if(file_exists(public_path().'/bzBuilder/images/'.CNF_LOGO) &amp;&amp; CNF_LOGO !='')
              &lt;img src="{{ asset('bzBuilder/images/'.CNF_LOGO)}}" width="150" alt="{{ CNF_APPNAME }}"/&gt;
              @else
              &lt;img src="{{ asset('bzBuilder/images/logo.png')}}" width="150" alt="{{ CNF_APPNAME }}"/&gt;
              @endif
          &lt;/div&gt;
          &lt;div class="col-md-8 center arial" style="font-weight: bold;"&gt;
              &lt;p style="padding-top: 1rem;"&gt;
                  Royal Bombay Yacht Club                
              &lt;/p&gt;
              &lt;p&gt;
                  C.S.M Marg, Apollo Bunder, Mumbai - 400001.Tel : +91-22-22021880 / 67527200.                
              &lt;/p&gt;
              &lt;p&gt;
                  Fax : +91-22-2202 1014 Email: rbycmail@vsnl.net &amp; billing@rbyc.co.in
              &lt;/p&gt;
          &lt;/div&gt;            
      &lt;/div&gt;
      &lt;!-- ----------------------details and address ---------------------- --&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-6 col-sm-12 col-xs-12"&gt;
              &lt;p&gt;&lt;b&gt;GODREJ ADI BURJOR ESQ., [G0014 ]&lt;/b&gt;&lt;/p&gt;
              &lt;br&gt;
              &lt;p&gt;
                  OFFICE - GODREJ INDUSTRIES LIMITED,
                  PIROJSHANAGAR, EASTERN EXPRESS HIGHWAY, VIKHROLI, MUMBAI - 400 079
              &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6 col-sm-12 col-xs-12" style="border: 1px solid black;"&gt;
              &lt;div class="inline-block col-md-6 col-sm-12 col-xs-12"&gt;Membership No: &lt;b&gt;G0014&lt;/b&gt;&lt;/div&gt;
              &lt;div class="inline-block col-md-6 col-sm-12 col-xs-12"&gt;Bill Dated: &lt;b&gt;21/08/2018&lt;/b&gt;&lt;/div&gt;
              &lt;div class="inline-block col-md-6 col-sm-12 col-xs-12"&gt;BillRef : &lt;b&gt;G0014-8&lt;/b&gt;&lt;/div&gt;
              &lt;div class="inline-block col-md-6 col-sm-12 col-xs-12"&gt;Due Date: &lt;b&gt;15/10/2018&lt;/b&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;br&gt;
      &lt;!-- ----------------------from/to date ---------------------- --&gt;
      &lt;div class="row centerWhenSmall"&gt;
          &lt;div class="col-md-3 col-sm-12"&gt;From: &lt;b&gt;01-Aug-2018&lt;/b&gt;&lt;/div&gt;
          &lt;div class="col-md-3 col-sm-12"&gt;To: &lt;b&gt;31-Aug-2018&lt;/b&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- ----------------------table top part---------------------- --&gt;
      &lt;div class="row tablePadding"&gt;
          &lt;table class="customTable"&gt;
              &lt;tr&gt;
                  &lt;th&gt;Narration&lt;/th&gt;
                  &lt;th class="center"&gt;Dr.&lt;/th&gt;
                  &lt;th class="center"&gt;Cr.&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;!-- ----------------------table mid part---------------------- --&gt;
      &lt;div class="row tablePadding2"&gt;
          &lt;table class="customTable2"&gt;
              &lt;tr&gt;
                  &lt;th&gt;BNo:32775 on 21/08/18 - DINING ROOM&lt;/th&gt;
                  &lt;th class="borderBottom center"&gt;1,082.00 &lt;/th&gt;
                  &lt;th class="borderBottom center"&gt;&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;!-- ----------------------table body---------------------- --&gt;
      &lt;div class="row tablePadding3"&gt;
          &lt;table class="customTable3"&gt;
              {{--&lt;tr&gt;--}}
                  {{--&lt;th class="center"&gt;Monthly Total : &lt;/th&gt;--}}
                  {{--&lt;th class="center"&gt;1,082.00&lt;/th&gt;--}}
                  {{--&lt;th class="center"&gt;0.00&lt;/th&gt;--}}
              {{--&lt;/tr&gt;--}}
              {{--&lt;tr&gt;--}}
                  {{--&lt;th class="center"&gt;Previous Outstanding : &lt;/th&gt;--}}
                  {{--&lt;th class="borderBottom center"&gt;0.00&lt;/th&gt;--}}
                  {{--&lt;th class="borderBottom center"&gt;0.00&lt;/th&gt;--}}
              {{--&lt;/tr&gt;--}}
              {{--&lt;tr&gt;--}}
                  {{--&lt;th class="center"&gt;Amount Due/Credit Balance : &lt;/th&gt;--}}
                  {{--&lt;th class="borderBottom center"&gt;1,082.00&lt;/th&gt;--}}
                  {{--&lt;th class="borderBottom center"&gt;0.00&lt;/th&gt;--}}
              {{--&lt;/tr&gt;--}}
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;br&gt;
      &lt;!-- ----------------------disclaimer---------------------- --&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12 col-sm-12 center"&gt;
              This is a computer generated invoice and does not require signature .
          &lt;/div&gt;
          &lt;div class="col-md-12 col-sm-12"&gt;
              Bill Dated : 21/08/2018
          &lt;/div&gt;
          &lt;div class="col-md-12 col-sm-12 borderBottom"&gt;
              &lt;b&gt;To be cleared by : 15/October/2018&lt;/b&gt;
          &lt;/div&gt;        
      &lt;/div&gt;
      &lt;!-- ----------------------notice---------------------- --&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12 col-sm-12" style="margin-bottom: 3%;"&gt;
              IF YOUR BILL SHOWS ARREARS,THEN ENTIRE AMOUNT BE PAID IMMEDIATELY.
          &lt;/div&gt;
          &lt;div class="col-md-12" style="text-decoration: underline;"&gt;
              Amount Due/Credit Balance Is As On 31 August 2018. Subsequent Payments Will Be Credited In The Following Month.
          &lt;/div&gt;
          &lt;div class="col-md-12"&gt;
              PAYMENT RECEIVED AFTER DUE DATE ATTRACT DELAYED PAYMENT CHARGES @ 2% ON OUTSTANDING AMOUNT
          &lt;/div&gt;
          &lt;div class="col-md-12"&gt;
              &lt;b style="font-weight: 900"&gt;REQUEST INFORM DETAILS OF PAYMENT MADE BY BANK TRANSFER/NEFT/RTGS/ BY EMAIL TO
              accounts@rbyc.co.in and billing@rbyc.co.in FOR PROMPT UPDATION OF MEMBERS ACCOUNT&lt;/b&gt;
          &lt;/div&gt;
          &lt;div class="col-md-12"&gt;
              Beneficiary : Royal Bombay Yacht Club
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- ----------------------bank details---------------------- --&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-6"&gt;
              &lt;b style="font-weight: 800"&gt;HDFC BANK&lt;/b&gt;&lt;br&gt;
              REGAL CINEMA BUILDING,&lt;br&gt; 
              SHAHID BHAGATSINGH ROAD,&lt;br&gt; 
              MUMBAI - 400 039&lt;br&gt;
              Current Account No : &lt;b&gt;00852530000017&lt;/b&gt;&lt;br&gt;
              SWIFT NO: &lt;b&gt;HDFCINBB&lt;/b&gt; [ OVERSEAS TRANSFER ]*&lt;br&gt;
              IFSC NO: &lt;b&gt;HDFC0000085&lt;/b&gt; [ IN INDIA TRANSFER ] *
          &lt;/div&gt;
          &lt;div class="col-md-6"&gt;
              &lt;b style="font-weight: 800"&gt;YES BANK LTD.&lt;/b&gt;&lt;br&gt; 
              Mittal Chambers, Nariman Point,&lt;br&gt;
              MUMBAI - 400 021&lt;br&gt;
              Savings Account No : &lt;b&gt;000494600000162&lt;/b&gt;&lt;br&gt;
              SWIFT NO : &lt;b&gt;YESBINBB&lt;/b&gt; [ OVERSEAS TRANSFER]*&lt;br&gt;
              IFSC NO : &lt;b&gt;YESB0000004&lt;/b&gt; [ IN INDIA TRANSFER ]*
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- ----------------------notice 2---------------------- --&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12" style="font-weight: 900"&gt;
              MEMBERS ARE REQUESTED TO CARRY THEIR MEMBERSHIP CARD AND PRODUCE IT WHEN PLACING AN
              ORDER.THIS IS TO AVOID ANY ERRORS IN BILLING.
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- ----------------------vat tin pan gst---------------------- --&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-9" style="font-size: 1.3rem; width: 70%;"&gt;
              &lt;div class="col-md-4"&gt;VAT TIN : 27720003820V&lt;/div&gt;
              &lt;div class="col-md-4"&gt;PAN : AAAAR0071R&lt;/div&gt;
              &lt;div class="col-md-4"&gt;GST : 27AAAAR0071R1Z7&lt;/div&gt;            
          &lt;/div&gt;
          &lt;div class="col-md-6"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- ----------------------bottom paragraph---------------------- --&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
              I/We certify that our S.T registration Certificate under B.S.T Act 1959 is in force on the date on which the sale of the goods
              specified in this bill/cash memorandum and that the transactions of sale covered by this bill/cash memorandum has been
              effected by us in the regular course of our business.
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- ----------------------disclaimer 2---------------------- --&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12 col-sm-12 center"&gt;
              This is a computer generated invoice and does not require signature .
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- ----------------------bottom---------------------- --&gt;
      &lt;div class="row" style="margin-top: 20%;"&gt;
          &lt;div class="col-md-12 center"&gt;
              --------------------------------------PLEASE TEAR OFF AND SEND THIS WITH YOUR CASH/CHEQUE------------------------------------
          &lt;/div&gt;
          &lt;div class="col-md-12 center"&gt;
              I am sending herewith cash/cheque for Rs.___________________ in payment of BillRef :
              G0014-8 dated: 21/08/2018 Name: GODREJ ADI BURJOR ESQ., [G0014 ]
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- ----------------------print---------------------- --&gt;
  &lt;/div&gt;
  &lt;div class="row" style="margin-bottom: 5%; "&gt;
      &lt;div class="col-md-5"&gt;&lt;/div&gt;
      &lt;div class="col-md-3"&gt;
          &lt;button style="text-align: center;" type="button" onclick='printDiv();' class="btn btn-primary btn-sm print-bill"&gt;&lt;i
              class="fa fa-print"&gt;&lt;/i&gt; Print
          &lt;/button&gt;
  &lt;!-- &lt;button style="text-align: center;" type="button" class="btn btn-primary btn-sm print-bill"&gt;
  &lt;i class="fa fa-print"&gt;&lt;/i&gt; Print
  &lt;/button&gt; --&gt;
  &lt;button type="button" class="btn btn-info btn-sm pay-bill" data-toggle="modal" data-target="#paybill"&gt;PAY
  &lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="col-md-4"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>