CODEWITHSUNDEEP
htmlcssprintingbootstrap-4
Matthew Weeks
Matthew Weeks

Reputation: 1028

Bootstrap 4 printing uses medium breakpoint

I recently updated some pages to be more mobile friendly, but the problem is some of our users print off pages and they print using the medium breakpoint (tablet styles) rather than desktop styles. It does this in both portrait and landscape, and it happens in both firefox and chrome

I would like pages to print using the large breakpoint but I can't figure out how.

I even already have the following set:

@media print {
    body {
        min-width: 992px !important;
    }
}

Desktop sample

Print sample

sample jsfiddle:

https://jsfiddle.net/jz56frqh/2/show

Upvotes: 3

Views: 3967

Answers (1)

Ali
Ali

Reputation: 152

There are variables to change print sizing in bootstrap variables.scss:

$print-page-size:                   a3 !default;
$print-body-min-width:              map-get($grid-breakpoints, "lg") !default;

If you want to do it manually in your CSS try this (change min-width to your desired size):

@media print {
  body {
    margin: 0;
    padding: 0 !important;
    min-width: 768px;
  }
  .container {
    width: auto;
    min-width: 750px;
  }
}

scss ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

Upvotes: 2

Related Questions