natshah/bootstrap-print

Bootstrap print for Bootstrap v3. Mange grids using Bootstrap v3 for printed media.

Maintainers

Details

github.com/Natshah/bootstrap-print

Homepage

Source

Issues

Installs: 353

Dependents: 0

Suggesters: 0

Security: 0

Stars: 62

Watchers: 9

Forks: 25

3.1.2 2017-01-28 01:53 UTC

MIT 2957d5f2701af09a5c52b2b93c2e7e01ed486a32

This package is auto-updated.

Last update: 2024-11-17 10:57:43 UTC

README

Bootstrap print for Bootstrap v3.

Mange grids using Bootstrap v3 for printed media.

This will help controlling grid columns size on printed pages. with RTL (right to left).

We do style most of our bootstrap theme sites based on the Small devices (sm).

LESS

  @import '../bootstrap/less/variables';
  @import '../bootstrap/less/mixins/grid-framework';
  @import '../bootstrap/less/mixins/grid';
  @import '../bootstrap-print/less/bootstrap-print.less';
  @import '../bootstrap-print/less/bootstrap-print-sm.less';

CSS

../bootstrap-print/css/bootstrap-print.css
../bootstrap-print/css/bootstrap-print-sm.css

We will have the list of custom set of print column sizes, so that we could change the layout in the printed media as well.

 .col-p-1,
 .col-p-2,
 .col-p-3,
 .col-p-4,
 .col-p-5,
 .col-p-6,
 .col-p-7,
 .col-p-8,
 .col-p-9,
 .col-p-10,
 .col-p-11,
 .col-p-12

For Example:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="../bootstrap-print/css/bootstrap-print.css">
    <link rel="stylesheet" type="text/css" href="../bootstrap-print/css/bootstrap-print-sm.css">
  <head>
  <body>
    <div class="container">
      <!-- In print media the sm Small devices will be used -->
      <div class="row">
        <div class="left col-sm-8"></div>
        <div class="right col-sm-4"></div>
      </div>

      <!-- In print media the p print will override the sm Small devices -->
      <div class="row">
        <div class="left col-sm-8 col-p-6"></div>
        <div class="right col-sm-4 col-p-6"></div>
      </div>
    </div>
  </body>
</html>

And you have a list of helper CSS classes.

Always insert a page break after the element.

.always-page-break-after
.always-pba

Avoid page break after the element (if possible).

.avoid-page-break-after
.avoid-pba

Insert page breaks after the element so that the next page is formatted as a left page.

.left-page-break-after
.left-pba

Insert page breaks after the element so that the next page is formatted as a right page.

.right-page-break-after
.right-pba

Always insert a page break before the element.

.always-page-break-before
.always-pbb

Avoid page break before the element (if possible).

.avoid-page-break-before
.avoid-pbb

Insert page breaks before the element so that the next page is formatted as a left page.

.left-page-break-before
.left-pbb

Insert page breaks before the element so that the next page is formatted as a right page.

.right-page-break-before
.right-pbb

Avoid page break inside the element (if possible).

.avoid-page-break-inside
.avoid-pbi

All link's href URLs will be hidden in print media too.

Install with the composer

composer require vardot/bootstrap-print

We could use one of the following options to use the same style in print.

Large devices (lg) style in print.

LESS

  @import '../bootstrap-print/less/bootstrap-print.less';
  @import '../bootstrap-print/less/bootstrap-print-lg.less';

CSS

../bootstrap-print/css/bootstrap-print.css
../bootstrap-print/css/bootstrap-print-lg.css

Medium devices (md) style in print.

LESS

  @import '../bootstrap-print/less/bootstrap-print.less';
  @import '../bootstrap-print/less/bootstrap-print-md.less';

CSS

../bootstrap-print/css/bootstrap-print.css
../bootstrap-print/css/bootstrap-print-md.css

Small devices (sm) style in print.

LESS

  @import '../bootstrap-print/less/bootstrap-print.less';
  @import '../bootstrap-print/less/bootstrap-print-sm.less';

CSS

../bootstrap-print/css/bootstrap-print.css
../bootstrap-print/css/bootstrap-print-sm.css

Extra small devices (xs) style in print.

LESS

  @import '../bootstrap-print/less/bootstrap-print.less';
  @import '../bootstrap-print/less/bootstrap-print-xs.less';

CSS

../bootstrap-print/css/bootstrap-print.css
../bootstrap-print/css/bootstrap-print-xs.css

For right to left:

LESS

  @import '../bootstrap/less/variables';
  @import '../bootstrap/less/mixins/grid-framework-rtl';
  @import '../bootstrap/less/mixins/grid-rtl';
  @import '../bootstrap-print/less/bootstrap-print-rtl.less';
  @import '../bootstrap-print/less/bootstrap-print-rtl-sm.less';

CSS

../bootstrap-print/css/rtl/bootstrap-print-rtl.css
../bootstrap-print/css/rtl/bootstrap-print-rtl-sm.css