0

I am trying to use bootstraps row/column grid on a print page, however when I go to the print preview all of the rows and columns are missing. I've referenced this solution and have the link tag showing in my html correctly:

<link href="/Content/bootstrap.css" rel="stylesheet" type="text/css" media="all">

Still, this shows on the screen:

enter image description here

And this shows on the print preview:

enter image description here

How do I get my bootstrap styles to show on the print preview and printed page?

Community
  • 1
  • 1
big_water
  • 3,024
  • 2
  • 26
  • 44

1 Answers1

2

According to this, Bootstrap 3 considers the paper page to be less than 768px wide, so it displays the mobile version of the page. You should probably create a special print stylesheet for the printed view.

Alternately, you should be able to get around this by adding xs classes to your grid, like this:

<div class="row">
    <div class="col-lg-4 col-md-4 col-xs-4">
        <h1>First Name</h1>
    </div>
    <div class="col-lg-4 col-md-4 col-xs-4">
        <h1>Middle Initial</h1>
    </div>
    <div class="col-lg-4 col-md-4 col-xs-4">
        <h1>Last Name</h1>
    </div>
</div>
<div class="row">
    <!-- Next row -->
</div>

This isn't a great idea though, because a printed view is different from a small viewport, so it's better practice to create a separate print stylesheet.

galit90
  • 61
  • 4
  • I will be creating a separate print stylesheet, however, it would be nice to be able to use bootstrap's grid layout. I'm curious if there are any alternatives to this. – big_water Jan 03 '17 at 23:23