Bootstrap grid for printing

Question

I would like to design a report page with a different layout for printing to mobile. I am using bootstrap v3. It seems the grid can\'t differentiate between the two as the b

Answer 1

The following works great to create grid elements specific for print media. Using Bootstrap 3.

@media print {
    .make-grid(print);
}

Then you can use all the grid col elements with the print keyword. Ex: col-print-6 col-print-offset-2, etc.

Answer 2

And the SASS version of Ehsan Abidi's answer using MiCc83's answer:

  @for $i from 1 through 12 {
      .col-sm-#{$i} {
          width: #{percentage(round($i*8.33)/100)};
          float: left;
      }
  }

I prefer this because I always spec the "sm" size and that most closely approximates a print page in my applications. Then I only need to add something specifically for print when I've got an outlier condition.

Answer 3

Maybe you could use Bootstrap 2. If you are familiar with Bootstrap 2, then you can use it as an alternative, as this offers non responsive CSS. Bootstrap 2 was not mobile first, you had to add an extra style sheet to make your web pages responsive.

Or you can add clearfixes for the mobile part. See http://getbootstrap.com/css/#grid-responsive-resets

Answer 4

For Bootstrap 4 (using SASS)

@each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

        @for $i from 1 through $grid-columns {

            @media print {
                .col-print#{$infix}-#{$i} {
                    @include make-col($i, $grid-columns);
                }
            }
        }
    }
}

will create

@media print {
  .col-print-1 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%; } }

@media print {
  .col-print-2 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%; } }

@media print {
  .col-print-3 {
    flex: 0 0 25%;
    max-width: 25%; } }

@media print {
  .col-print-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%; } }

@media print {
  .col-print-5 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%; } }

@media print {
  .col-print-6 {
    flex: 0 0 50%;
    max-width: 50%; } }

@media print {
  .col-print-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%; } }

@media print {
  .col-print-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%; } }

@media print {
  .col-print-9 {
    flex: 0 0 75%;
    max-width: 75%; } }

@media print {
  .col-print-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%; } }

@media print {
  .col-print-11 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%; } }

@media print {
  .col-print-12 {
    flex: 0 0 100%;
    max-width: 100%; } }

Answer 5

What I did was to manually recreate those columns classes in my print css.

.col-print-1 {width:8%;  float:left;}
.col-print-2 {width:16%; float:left;}
.col-print-3 {width:25%; float:left;}
.col-print-4 {width:33%; float:left;}
.col-print-5 {width:42%; float:left;}
.col-print-6 {width:50%; float:left;}
.col-print-7 {width:58%; float:left;}
.col-print-8 {width:66%; float:left;}
.col-print-9 {width:75%; float:left;}
.col-print-10{width:83%; float:left;}
.col-print-11{width:92%; float:left;}
.col-print-12{width:100%; float:left;}

Then I just use those classes like I use bootstrap classes to make my columns for print only. I also created .visible-print and .hidden-print to hide/show elements only in the print version.

It still needs some work, but that quick patch helped me a lot.

Answer 6

Your switch styles like this

<div class="row">
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

See

#grid-example-mixed or #grid-example-mixed-complete

and may you need to clearfix

<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>

#grid-responsive-resets

Edit: 04/2019

Since Bootstrap 4.x there are new classes that can be used to set the display behavior when printing. SEE 4.3 Docs