How can I expand a Bootstrap 3 column to be the full page width when the page is printed?

Question

When a page in my application is printed, I'd like to hide the side navigation and expand the width of the main content to be a full 12 columns (I'm using Bootstrap 3).

Here's the current html/css.

<div class="row">
  <div class="col-md-3 side-navigation hidden-print">
    ...
  </div>
  <div class="col-md-9">
    ...
  </div>
</div>

What's the Bootstrap idiomatic way to expand the second column's width when printed?

Answer 1

It's possible, with additional css rules:

Add class print-9 to your col-sm-9 class. Then add this to your css:

@media print {
    .print-9 { width: 100% }
}

Answer 2

Expanding upon Andrey's answer. To account for offsets, like col-offset-1, you need to set the margin-left to 0.

@media print {
    .col-print-12 {width: 100%; margin-left:0px;}
}