Printing page with bootstrap 3

Question

I\'ve been looking through a lot of answers here on stackoverflow that semi-cover what I\'m wondering about, but haven\'t found anything that worked for me.

I unders

Answer 1

For those who use bootstrap mixins to create columns like this (sass version):

@include make-sm-column(3, 0);

it won't be enough to overwrite the styles for columns classes like Christina suggests. The only simple solution I've found was to change $screen-sm in _variables.scss to 595px and recompile bootstrap.css

So, find this code in _variables.scss:

$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;

and change it to this:

// decrease min-width to fix print layout issue
$screen-sm:                  595px !default; 
$screen-sm-min:              $screen-sm !default;

then in your _print.scss

@page {
  size: A4;
  margin: 0;
}
@media print {

  html, body {
    width: 768px;
  }
  body {
    margin: 0 auto;
  }

  // .. your custom styles for print layout

}