How to create a printable Twitter-Bootstrap page

by

Bootstrap 3.2 update: (current release)

Current stable Bootstrap version is 3.2.0.
With version 3.2 visible-print deprecated, so you should use like this:

Class                        Browser    Print
 -------------------------------------------------
.visible-print-block         Hidden        Visible (as block)
.visible-print-inline        Hidden        Visible (as inline)
.visible-print-inline-block  Hidden        Visible (as inline-block)
.hidden-print                Visible       Hidden

Bootstrap 3 update:

Print classes are now in documents: http://getbootstrap.com/css/#responsive-utilities-print

Similar to the regular responsive classes,
       use these for toggling content for print.

Class            Browser    Print
 ----------------------------------------
.visible-print   Hidden     Visible
.hidden-print    Visible    Hidden

Bootstrap 2.3.1 version:

After adding bootstrap.css file into your HTML,
Find the parts that you don’t want to print and add hidden-print class into tags.
Because css file includes this:

@media print {
  .visible-print  { display: inherit !important; }
  .hidden-print   { display: none !important; }
}

More Related Contents:

  1. twitter bootstrap icons are missing in print
  2. Print without space in python 3
  3. How can I use JavaPOS to print reciepts with an Epson printer?
  4. Printing long integers in awk
  5. Is there a portable way to print a message from the C preprocessor?
  6. Unicode characters on ZPL printer
  7. Twitter Bootstrap: Print content of modal window
  8. Vertically center element on HTML page with some content on top (Bootstrap)
  9. How do I hide an element when printing a web page?
  10. The best way to print a Java 2D array? [closed]
  11. Why do R objects not print in a function or a “for” loop?
  12. How can I force browsers to print background images in CSS?
  13. How to get header from cards or similar to have the same height with flex box?
  14. The difference between sys.stdout.write and print?
  15. Bootstrap 4 Cards of same height in columns
  16. How to vertically center a Bootstrap carousel-caption?
  17. bootstrap 3 responsive table with fixed first column
  18. Retain Twitter Bootstrap Collapse state on Page refresh/Navigation
  19. How to fade loop background images?
  20. Bootstrap 4 Navbar align logo center and toggle icon on the left
  21. Bootstrap 3 Carousel fading to new slide instead of sliding to new slide
  22. Sass::SyntaxError: File to import not found or unreadable: bootstrap-sprockets
  23. How can I center an image in Bootstrap?
  24. Silent printing of a PDF in Python
  25. Using media breakpoints in Bootstrap 4-alpha
  26. Printing from ASP.NET to a network printer
  27. Bootstrap Responsive Text Size [duplicate]
  28. Connecting and printing to a printer in Java
  29. Bootstrap Grid System new line does not look nice
  30. Make Twitter Bootstrap navbar link active

Leave a Comment