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?
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% }
}
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;}
}
There were at the moment of answering no helper classes in Bootstrap to do this. When you want to accomplish such a thing, you can hide div's with css or set the class of the second div with Javascript and change it from col-md-9 to col-md-12. Or, see the answer with the 'print' class.
