bootstrap 4 grid style and classes do not work

[Gyamfi Samuel]

I'm currently trying to use printThis to print receipts for clients but I'm facing problems with rendering bootstrap 4 styles and the grid system on the print layout. I've used loadcss to bring in my styles but they're just not working. I really need help this issue. Thanks.

[Jason Day]

My guess is that you're printing a specific child of Bootstrap's grid parent (<div class="container">), hence why the grid doesn't work correctly when only the child is copied into the iframe.

You have a few options:

• print the parent grid container and use @media print CSS to hide other elements you don't need
• Craft new CSS to adjust the layout and import that CSS with loadCSS
• use beforePrintEvent to write javascript to wrap the content copied into the iframe in the grid container (may not work consistently)

[Gyamfi Samuel]

Yeah I'm printing a receipt from a modal box. The content in the modal are wrapped around a container class though and it's suppose to cover just half of the print sheet. But everything breaks up (rows, columns etc) in the print preview.

[Jason Day]

You likely need some print specific CSS to set the same contraints or inherited ancestor classes that are present in the modal or page.

[Ali Ramezani]

My guess is that you're printing a specific child of Bootstrap's grid parent (<div class="container">), hence why the grid doesn't work correctly when only the child is copied into the iframe.

You have a few options:

* print the parent grid container and use @media print CSS to hide other elements you don't need

* Craft new CSS to adjust the layout and import that CSS with `loadCSS`

* use `beforePrintEvent` to write javascript to wrap the content copied into the iframe in the grid container (may not work consistently)

how do it?