htmlcsstwitter-bootstrapprinting-web-page

Bootstrap loses layout printing portrait

I created what looked like a usable template from a web site, and happily started to use it. My printer was initially set to landscape when I printed the information, so everything looked fine and I got a pretty report neatly centred in the page. The following is a file I generated (I'm using jinja2 templating, but if I know what's wrong with the HTML/CSS I can fix the templates).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap 4, from LayoutIt! -->
    <title>SPoE Testing</title>

    <meta name="description" content="Source code generated using layoutit.com">
    <meta name="author" content="LayoutIt!">

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

  </head>
  <body>
    <div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
        </div>
        <div class="col-md-6">
            <div class="page-header">
                <h1>
                    Integrated Next-Generation Test System
                </h1>
                <hr>
            </div>
        </div>
        <div class="col-md-3">
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
        </div>
        <div class="col-md-6">
            <div class="page-header">
                <h2>
                    Single PoE <small>Unit 0000000 at 2019-05-23 23:59:59</small>
                </h2>
                <hr>
            </div>
            <div class="row">
                <div class="col-md-4">
                <h3>#0000000</h3>
                </div>
                <div class="col-md-8">
                <h3>pass</h3>
                </div>
            </div>

            <div class="row">
                <div class="col-md-4">
                <h5>Step 1</h5>
                </div>
                <div class="col-md-8">
                <h5>pass</h5>
                </div>
            </div>

            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-3">
                power
                </div>
                <div class="col-md-8">
                28.1
                </div>
            </div>

            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-3">
                current
                </div>
                <div class="col-md-8">
                525
                </div>
            </div>

            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-3">
                voltage
                </div>
                <div class="col-md-8">
                53.7
                </div>
            </div>

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

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/scripts.js"></script>
  <style type="text/css"> @page { size: auto } </style>
  </body>
</html>

As you can see this prints fine in landscape:

enter image description here

Unfortunately when I try to print in portrait the output is rather less convincing: enter image description here

The inline @page { size: auto } is something I added as a result of my researches - it was recommended in this question but alas it appears to make no difference. Interestingly, while I found several questions relating to inability to print in landscape, nobody else appears to have found portrait layout an issue.

As a designer I'm a pretty good bricklayer, so while software is no problem at all for me I find these design issues quite tortuous sometimes. What is going on here, and how do I fix it?

Solution

  • You will need to write CSS for print media.

    Here is a basic example based on your code 

    @media print and (max-width: 767px) {
  .row{
    display: flex;
    flex-direction: row;
  }
  .col-md-3{
    flex-basis: 25%;
  }
  .col-md-1{
    flex-basis: 8.33%;
  }
  .col-md-8{
    flex-basis: 66.67%;
  }
  .col-md-6{
    flex-basis: 50%;
  }
}
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap 4, from LayoutIt! -->
    <title>SPoE Testing</title>

    <meta name="description" content="Source code generated using layoutit.com">
    <meta name="author" content="LayoutIt!">

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

  </head>
  <body>
    <div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
        </div>
        <div class="col-md-6">
            <div class="page-header">
                <h1>
                    Integrated Next-Generation Test System
                </h1>
                <hr>
            </div>
        </div>
        <div class="col-md-3">
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
        </div>
        <div class="col-md-6">
            <div class="page-header">
                <h2>
                    Single PoE <small>Unit 0000000 at 2019-05-23 23:59:59</small>
                </h2>
                <hr>
            </div>
            <div class="row">
                <div class="col-md-4">
                <h3>#0000000</h3>
                </div>
                <div class="col-md-8">
                <h3>pass</h3>
                </div>
            </div>

            <div class="row">
                <div class="col-md-4">
                <h5>Step 1</h5>
                </div>
                <div class="col-md-8">
                <h5>pass</h5>
                </div>
            </div>

            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-3">
                power
                </div>
                <div class="col-md-8">
                28.1
                </div>
            </div>

            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-3">
                current
                </div>
                <div class="col-md-8">
                525
                </div>
            </div>

            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-3">
                voltage
                </div>
                <div class="col-md-8">
                53.7
                </div>
            </div>

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

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/scripts.js"></script>
  <style type="text/css"> @page { size: auto } </style>
  </body>
</html>