Why does the printContent() { window.print(); } function distort my layout?

On an intranet page using a Bootstrap grid, calling printContent() (which internally calls window.print()) produces a compressed print view. What might be causing this layout issue?

try using a custom print css, seems like boostrap print queries distort your layot. adjust your media queries for print so the grid styles apply correctly. a little stylesheet tweak can fix it

I experienced a similar issue when trying to print a page designed with a responsive grid system. The problem was not with the print function itself but how the browser applies the styles in print mode. I eventually found that the default Bootstrap settings for print didn’t align with my desired format. I resolved this by creating a dedicated print stylesheet that resets some of the grid styles and adjusts widths. It was a process of trial and error, but isolating the print-specific rules really improved the output.