title: Module that converts HTML to PDF module compatible with Bootstrap and Flask
body: <p>Does anyone know of an HTML to PDF converter for either Flask or Javascript/Jquery that works with Bootstrap CSS? </p>
  
  <p>I've tried PDFkit but I haven't gotten it the work with Bootstrap. Instead of displaying multiple columns in the Bootstrap grid, it places everything to the left as if it is ignoring the Bootstrap styling. </p>
  
  <p>Here is what I have tried:</p>
  
  <pre><code>@app.route('/test')
  def test():
      config = pdfkit.configuration(wkhtmltopdf="C:\\Program Files\\wkhtmltopdf\\bin\\wkhtmltopdf.exe")
      report = render_template('test.html')    
      pdf = pdfkit.from_string(report, False, configuration=config)    
      response = make_response(pdf)
      response.headers['Content-Type'] = 'application/pdf'
      response.headers['Content-Disposition'] = 'inline; filename = report.pdf'    
      return response
  </code></pre>
  
  <p>And the HTML. I borrowed this from the Bootstrap website for a minimal example:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Bootstrap Example&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;!--&lt;link rel="stylesheet" href="static/css/bootstrap.min.css"&gt; --&gt;
    &lt;!--&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"&gt;--&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="jumbotron text-center"&gt;
    &lt;h1&gt;My First Bootstrap Page&lt;/h1&gt;
    &lt;p&gt;Resize this responsive page to see the effect!&lt;/p&gt; 
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-sm-4"&gt;
        &lt;h3&gt;Column 1&lt;/h3&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit...&lt;/p&gt;
        &lt;p&gt;Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-4"&gt;
        &lt;h3&gt;Column 2&lt;/h3&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit...&lt;/p&gt;
        &lt;p&gt;Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-4"&gt;
        &lt;h3&gt;Column 3&lt;/h3&gt;        
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit...&lt;/p&gt;
        &lt;p&gt;Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>