CODEWITHSUNDEEP
htmlcssgoogle-chromebootstrap-4
a.powell
a.powell

Reputation: 1722

Bootstrap HTML printing (chrome)

I have explored a number of SO questions, but haven't found a full answer. I am using bootstrap with HTML 5. I am attempting to build a page that can fit on printed paper (8.5x11 or A4) for reports. However, I am running into a number of problems in regards to printing.

The bootstrap cells tend to stack when I use ctrl+p and don't keep the formatting they do in the desktop. Any additional formatting -- like font colors -- don't show up in the print preview. The margins are not consistent either. How can I use bootstrap and build a report page that looks the same in both the desktop and printed?

Here is a short example of what I'm working with:

HTML

<div class="container">
  <div class="row">
   <div class="col-sm-6">
     <h2>Person Name</h2>
   </div>
   <div class="col-sm-6">
     <p>Height</p>
   </div>
 </div>
</div>

CSS

@media print{
   @page {
      size: A4;
      margin: 0cm;
    }
    html, body {
      width: 1024px;
    }
    body {
      margin: 0 auto;
    }
    nav {
      display: none;
    }
 }

Instead of "Person Name" and "Height" being in adjacent columns when printed, they are stacked on top of one another, unlike the desktop view.

Any help is much appreciated!

Upvotes: 0

Views: 1552

Answers (1)

Jeffhowcodes
Jeffhowcodes

Reputation: 416

A printer margin is likely interfering with the column view.

CSS:

@media print{
   @page {
      size: A4;
      margin: 0cm;
    }
    html, body {
      width: 1024px;
    }
    .container {
      width: auto;
    }
    body {
      margin: 0 auto;
    }
    nav {
      display: none;
    }
    .col-6-print{
      flex:0 0 50% !important;
    }
 }

html:

<div class="container">
  <div class="row">
    <div class="col-sm- col-6-print6">
      <h2>Person Name</h2>
    </div>
    <div class="col-sm-6 col-6-print">
      <p>Height</p>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions