bootstrap printing width

Question

I\'m using bootstrap in an app and as you can see (below) when printing the browser (left side) is using a really small width when printing (right) so the responsive layout is m

Answer 1

I had a very similar problem. Ensuring the responsive css is enabled only for media="screen" solved it.

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet" media="screen">

Answer 2

Getting rid of the responsive style is the answer! thanks a lot !

I'm using rails twitter bootstrap, that recompiles the less sources, so just a little note to say that it works like this too (first line of bootstrap_and_overrides.css.less):

@import "twitter/bootstrap/bootstrap.less";
@media screen {
    @import "twitter/bootstrap/responsive.less";
}

oops: edit, it works fine in development, but brings error when compiling for production... had to build 2 distinct bootstrap_and_overrides for screen and print version (looking for a cleaner solution)

Answer 3

For Bootstrap 3, this solved my problem:

@media print {
  .container {
    width:100%;
  }
}