Search code examples
cssbootstrap-4mediaprint-css

Designing Website for print with css

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: enter image description here

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? enter image description here

Any help would be appreciated.

Solution

  • 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;
 }
}