Bootstrap: 4.1.3 grid classes don't work with wicked_pdf's wkhtmltopdf 0.12.5

[RudyOnRails]

bootstrap_v4.0.0.pdf
bootstrap_v4.1.3.pdf

I can confirm that upgrading to bootstrap 4.1.3 breaks grid layouts in wicked_pdf, which uses wkhtmltopdf, which uses Qt WebKit.

This may just be that QTWebKit hasn't kept up with cutting edge browser technologies but thought I would at least start here to register the issue, as I did not find it in my due-dilligence searching before posting.

I'm not a front-end pro, so I can't point out the cause of the bug (that is if it something that can even be resolved in BS). All I can say is that I heard that in BS v4, the grid system was revamped to use flexbox. I thought maybe QTWebkit couldn't hande that, but it can in my example with 4.0.0, but breaks when switching to 4.1.3.

Here's my supporting info, if it helps. Note the reduced case with the showterm and the repo.

Best, and thanks for all the work you do.
Kevin

• Operating system and version (Windows, macOS, Android, iOS, Win10 Mobile)
  
  
  
  • macOS 10.13.6
  
  
• Browser and version (Chrome, Firefox, Safari, IE, MS Edge, Opera 15+, Android Browser)
  
  
  
  • wkhtmltopdf 0.12.4 (with patched qt)
  
  
• Reduced test case and suggested fix using CodePen or JS Bin
  
  
  
  • http://showterm.io/b23bf674bdcdd1d929a8f
  
  
  • https://github.com/RudyOnRails/bootstrap_wkhtmltopdf_issue
  
  

[XhmikosR]

/CC @twbs/css-review

[galoberlyn]

Hi I've got the same issue, however I found something here and it's quite helpful:
https://stackoverflow.com/questions/19705880/converting-twitter-bootstrap-page-into-pdf-with-wkhtmltopdf-span-issue
, just use col-xs-n, not sure why this works but it's definitely worth a try.

[RudyOnRails]

@galoberlyn thanks for chiming in. back when I was dealing with this I recall coming across that post - but I don't think it solved the problem.

Anywho, I tried it again, and here's my new commit if you want to look at the new pdf generated. In summary, after looking at the docu, Bootstrap 4* does not implement col-xs-*/n anymore, so it didn't work; they just use col-*/n instead now, which I also tried locally and it doesn't solve the problem.

[XhmikosR]

Yeah, these classes have been removed in Bootstrap 4. You'll have to use v3.x if you want these.

[RudyOnRails]

@XhmikosR why was this closed? It's still an issue...

[XhmikosR]

Because it's an incompatibility with the tool you are using. V4 is a major
version and the classes were changed. Or did I miss something?

On Fri, Dec 28, 2018, 20:17 Kevin Musiorski <[email protected] wrote:

@XhmikosR https://github.com/XhmikosR why was this closed? It's still
an issue...

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/twbs/bootstrap/issues/27642#issuecomment-450403503,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAVVteh4X0IT3T_Umje4HzsImXBH8WhMks5u9mAdgaJpZM4YW9E8
.

[RudyOnRails]

Thanks for writing back @XhmikosR. You did miss a little something. It's best to disregard the last few comments recently from @galoberlyn and i as they just add confusion.

@galoberlyn was just sharing a stack overflow answer to see if it would be a workaround but it was outdated as those xs classes don't even exist anymore in v4 like you said, so I don't think @galoberlyn read this issue fully in detail, and was thinking this was all v3 related. I still tested out @galoberlyn's suggestion, because I'm sick on vacation and have a slow brain and wanted to be respectful and actually respond to their guess of an outdated workaround.

The grid still breaks from 4.0 to 4.1 like I originally explained in my issue above.

Hope this helps clear things up.

[mdo]

Looking at the diff between v4.0.0 and v4.1.0, the only changes I see to the grid are the addition of some WebKit classes. See
https://github.com/twbs/bootstrap/compare/v4.1.0..v4.0.0#diff-af96efa4270ab5ad379f4965e12235a1. I’m assuming this was added when we tweaked some browser support somewhere? Could’ve been the addition of not dead?
https://github.com/twbs/bootstrap/commit/13b8b9f03aea4278863550ba19167622d651d2ec#diff-b9cfc7f2cdf78a7f4b91a753d10865a2

[MartijnCuppens]

We 've upgraded to autoprefixer 8 which uses Browserlist 3.0 which has dropped support for older webkit engines.

You can solve this in 4.1 by changing this line:
https://github.com/twbs/bootstrap/blob/8f7bd419935adfcd53c471a0202083464800619e/package.json#L146
to "Chrome > 27",

or in 4.2 by changing this line: https://github.com/twbs/bootstrap/blob/c0dfda964fb6e283c778570ce0556e4f01e2817f/.browserslistrc#L6
to Chrome > 27

And rebuild the sass afterwards. We'll not be changing this by default, because we don't support Qt WebKit by default due to its limited usage and adding this would increase our default file size.

I hope I helped you out with that, @RudyOnRails

[RudyOnRails]

@MartijnCuppens yes, that is a very suffice and exact explanation of the reasoning for the issue. Thank you for the information and the proposed workaround.

Now I agree that this issue should remain closed by @XhmikosR since bootstrap >= 4.1's grid layout will not work with wicked_pdf, since wicked_pdf uses wkhtmltopdf which uses Qt WebKit, which is an older Webkit engine which is no longer supported by Browserslist 3.0 which is used by autoprefixer 8 which is the version of autoprefixer that bootstrap upgraded to in 4.1.

Happy new year 🎊and thanks for y'all's time.