Logo Questions Linux Laravel Mysql Ubuntu Git Menu

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

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 class="col-md-9">

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

like image 217
barelyknown Avatar asked Mar 21 '23 20:03


2 Answers

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% }
like image 55
Andrei Konstantinov Avatar answered Apr 25 '23 15:04

Andrei Konstantinov

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;}
like image 31
Daniel Congrove Avatar answered Apr 25 '23 15:04

Daniel Congrove