Designing Website for print with css

Question

One of client needs to generate brochure from his website. If he prints his website it needs to be printed in paper with specific layout, some sections needs to be deleted and some needs to be modified.

I am using bootstrap 4 and I have created separate css 'print.css' with media="print" attribute. But the problem is I am not being able to layout it as per my requirement.

It's displaying like this:

As I am using bootstrap and using media="all" in attribute, it should layout my website for print also. isn't it? I am very beginner to this and cannot finding way to fix this problem.

And there are default title & URLs also while printing. Can I remove them?

Any help would be appreciated.

Answer 1

Use the media print css to get rid of the url and the dates and extra stuff on your page.

@media print{
 a[href]:after{
  content : none;
 }
 @page{
  margin : 0;
 }
}