How to print my Bootstrap page as it appears online.

This is my first Bootstrap website, and everything works the way I need it to except the printed version. I'm in the process of making the website responsive, but just can't find anything online to print it properly.

The CSS file is interesting to say the least. The order is strange but important (for some unknown reason).

If the CSS is included inside the HTML file, the print preview displays the content larger (around 3 pages), the .contact-links and .contact-links2 classes showcases the text properly, and if "Background graphics" is checked in the print options panel, .jumbotron-special class displays the correct grey backdrop, but isn't vertically centered, and the <strong> text is in black where it should all be white.

If the CSS is linked to the HTML, the page fits mostly on one page with the footer hanging on the second page. The .contact-links and .contact-links2 text isn't formatted, the .jumbotron-special class doesn't display the grey backdrop at all, and all the text is black and larger. See css-in-html.jpg.

I suspect that the printout is for some reason displaying at a smaller, narrower screen, which isn't currently fixed in respect to the CSS media queries. I'd like if the links didn't show the URL link and the logos/icons weren't skewed.
See css-linked-to-html.jpg.

I need it to print out exactly like it appears online at full - 3/4 width.

You can download the source files here: https://drive.google.com/open?id=0B7SM5Lky-I-WakhyWjFyUkdab1k
And for Mac users there is a zipped file attached.
css-in-html.jpg
css-linked-to-html.jpg
Website-Files.zip
pajkicoPresidentAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
In the same way you style your page for mobile you need to style it for printing. Bootstrap provides various classes and helpers to achieve this. You could (or in addition) set up a separate css for printing using media="print" in your <link>

Look for @media print { in bootstrap.css
0
lenamtlCommented:
Hi,

Additional info

Keep in mind that printing a web page may give different results depending of the browser, OS and printer settings.
This can be a real challenge, specially with page break and float ...

Create your custom print.css with media="print"
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />

If you encounter issue with your existing theme.css (make sure there is no @media print inside the file)
then you can add media="screen" to the link
<link rel="stylesheet" type="text/css" href="css/theme.css" media="screen" />

Ref:
http://alistapart.com/article/goingtoprint
https://developer.mozilla.org/en-US/docs/Web/CSS/@media
http://www.w3.org/TR/CSS21/page.html#page-breaks

You can also set a different page layout for print only.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.