After working extensively with Bootstrap Grid and creating a layout, I found that I was unable to print exactly what was being displayed on the web page without any changes. Despite trying various methods of using JavaScript to add custom CSS codes for printing, I was unsuccessful.
You can view my sample layout here, which I am attempting to print as it appears on the screen.
The last JavaScript code snippet I attempted was:
<script>
var all_source_content = document.documentElement.innerHTML;
var DocumentContainer = document.getElementById('main_container');
var WindowObject = window.open('', 'PrintWindow', '');
WindowObject.document.writeln('<!DOCTYPE html>');
WindowObject.document.writeln('<html><head><title></title>');
WindowObject.document.writeln('<link rel="stylesheet" href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css">');
WindowObject.document.writeln('<style></style>');
WindowObject.document.writeln('</head><body>');
console.log(DocumentContainer.innerHTML);
WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.writeln('</body></html>');
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
</script>
Unfortunately, this method also did not yield the desired result.
This is the layout I aim to reproduce: https://i.sstatic.net/t90DM.png