23

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 moving all the right site elements below the left side ones and the printing version won't fit in one single page.

Do you know how can I force the browser to keep the right width?

Thanks,

Remo

Valid XHTML.

1

4 Answers 4

24

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">
6
  • 4
    If you're loading from bootstrapcdn.com, the later version do not have a separate bootstrap-responsive.css, only bootstrap-combined.min.css which is everything including the responsive styles, and bootstrap.min.css which is everything except the responsive styles. As a work-around, you can load both files with separate media settings: <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet" media="print"> & <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" media="screen"> Jun 17, 2013 at 13:31
  • 3
    If you notice the two different version numbers, that's because of this bug github.com/netdna/bootstrap-cdn/pull/106 . In v2.3.2 bootstrap.min.css includes the responsive styles, when it should not. Jun 17, 2013 at 13:33
  • 5
    Does anyone know how to do this with bootstrap 3? Aug 12, 2013 at 19:19
  • 1
    @fande455 bootstrap 3 has native css classes you can apply to toggle items that should display when printing. Jan 3, 2014 at 16:54
  • @ScottWoodall, is there anything more than hidden + visible classes for bootstrap 3 to fix this? It would mean a ton of duplicate html if I have to create separate states for print/screen. Apr 7, 2014 at 21:13
8

For Bootstrap 3, this solved my problem:

@media print {
  .container {
    width:100%;
  }
}
3
  • Not for me. It gets out of the page.
    – David Gras
    Feb 27, 2017 at 12:26
  • 3
    But a fixed width did the trick @media print { body { width:992px; } } thanks for the idea.
    – David Gras
    Feb 27, 2017 at 13:15
  • This fixed the full width problem for me perfectly. Thanks.
    – semaj0
    Mar 3, 2017 at 4:02
3

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)

0

Bootstrap has something like this:

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

So you can use an inline css like this to override above rule and make printed media fit page's width:

<body style="min-width:100%!important">

(A new !important css rule has problem overriding a similar one and I think the only (simple) way to override above rule is to use an inline css)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.