title: weasyprint is not rendering bootstrap4 css correctly
body: <p>I'm trying to generate an invoice by first designing it as HTML and then feeding that to weasyprint to generate the pdf. I'm using Django 2.2.5 version with bootstrap 4.3.1 and weasyprint 50.
  The <code>invoice_generator(request)</code> function calls the generate_invoice function with the <code>request</code>, <code>username</code> and <code>template_name</code>.</p>
  
  <p>views.py:</p>
  
  <pre class="lang-py prettyprint-override"><code>from invoice_generator import generate_invoice
  
  def invoice_generator(request, username):
      ret_val = generate_invoice(request, username, template_name="ui/invoice.html")
      return ret_val
  </code></pre>
  
  <p>invoice_generator.py:</p>
  
  <pre class="lang-py prettyprint-override"><code>from django.shortcuts import render
  from commons.models import SMSUser, SMSMessages, Invoice
  from commons.serializers import InvoiceSerialzer
  
  from django.template.loader import get_template
  from django.conf import settings
  from django.http import HttpResponse
  
  from weasyprint import HTML, CSS
  import tempfile
  
  from datetime import datetime, date
  
  def generate_invoice(request, username, template_name):
      user_to_invoice = SMSUser.objects.get(username=username)
      user_invoice = Invoice(invoice_to=user_to_invoice)
  
      company_to_invoice = user_to_invoice.company_name
      company_tin = user_to_invoice.company_tin
      account = user_to_invoice.pk
      user_email = user_to_invoice.email
      all_users_in_company = SMSUser.objects.filter(company_name=company_to_invoice)
      user_invoice.save()
      invoice_number = user_invoice.pk
      paid_status = user_invoice.payment_status
  
      all_sms_sent_by_users = {}
  
      for user in all_users_in_company:
          # TODO you can run the code at the begining of each month by doing:
          # TODO x = date.today() then x = x.replace(day=1) 
          total_sent_by_single_user = SMSMessages.objects.filter(
              sending_user=user,
              delivery_status="True",
              sent_date__year=datetime.now().year,
              sent_date__month = 10
              # sent_date__month = datetime.now().month - 2
              )
          all_sms_sent_by_users = {
              "all_sms_sent": [
                  {
                  "user": user,
                  "total_sent_single_user": total_sent_by_single_user.count()
                  }
              ]
          }
      total_amount_sent = SMSMessages.objects.filter(
          sent_date__year = datetime.now().year,
          sent_date__month = 10,
          # sent_date__month = datetime.now().month - 1,
          sending_user__company_name=company_to_invoice
      )
  
      # TODO feed the below object to a pdf renderer and return that pdf rendered object
      context_object =  {
          "username": user_to_invoice,
          "company_name": company_to_invoice,
          "account": account,
          "invoice_number": invoice_number,
          "tin": company_tin,
          "email": user_email,
          "bill_month": datetime.now().month - 1,
          "all_sms_sent": all_sms_sent_by_users,
          "total_amount_sent": total_amount_sent.count(),
          "vat": total_amount_sent.count() * 0.70 * 0.15,
          "total_price": total_amount_sent.count() * 0.70 * 1.15, 
          "payment_status": paid_status
      }
  
      rendered_html = get_template(template_name).render(
         context_object,
          request
      ).encode(encoding='UTF-8')
  
      pdf_file = HTML(string=rendered_html, base_url=request.build_absolute_uri())
      pdf_file.render()
      pdf_container = pdf_file.write_pdf(
          stylesheets=[
              CSS(
                  'ui' + settings.STATIC_URL + 'ui/css/bootstrap.min.css'
              )
          ]
      )
      response = HttpResponse(content_type='application/pdf;')
      response['Content-Disposition'] = 'filename=Invoice ' + company_to_invoice + str(datetime.now().month) + '.pdf'
      response['Content-Transfer-Encoding'] = 'UTF-8'
      with tempfile.NamedTemporaryFile(delete=True) as pdf_writer:
          pdf_writer.write(pdf_container)
          pdf_writer.flush()
          pdf_writer = open(pdf_writer.name, 'rb')
          response.write(pdf_writer.read())
      return response
  </code></pre>
  
  <p>and this is the <code>ui/invoice.html</code>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      {% load static %}
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"&gt;
      &lt;link rel="shortcut icon" type="image/png" href="{% static 'ui/images/favicon.ico' %}"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;!-- bootstrap4 css --&gt;
      &lt;link href="{% static 'ui/css/bootstrap.min.css' %}" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
      &lt;title&gt;sms.et | Invoice&lt;/title&gt;
  &lt;/head&gt;
  &lt;body class="text-center d-print-block" style="background-color: #f5f5f5;"&gt;
      &lt;div class="container-fluid align-items-center align-middle"&gt;
          &lt;header&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-12 bg-primary"&gt;
                      &lt;h1 class="font-weight-bold self-center h1 text-white"&gt;Service Invoice&lt;/h1&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;br&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;h4 class="font-weight-light self-center h4"&gt;&lt;p&gt;Customer Name: &lt;span class="font-weight-lighter"&gt; {{ username.company_name }}&lt;/span&gt;&lt;/p&gt;&lt;/h4&gt;
                      &lt;h4 class="font-weight-light self-center h4"&gt;&lt;p&gt;Account: &lt;span class="font-weight-lighter"&gt; {{ account }}&lt;/span&gt;&lt;/p&gt;&lt;/h4&gt;
                      &lt;h4 class="font-weight-light self-center h4"&gt;&lt;p&gt;T.I.N: &lt;span class="font-weight-lighter"&gt; {{ tin }}&lt;/span&gt;&lt;/p&gt;&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;h4 class="font-weight-light self-center h4"&gt;&lt;p&gt;Invoice number: &lt;span class="font-weight-lighter"&gt; {{ invoice_number }}&lt;/span&gt;&lt;/p&gt;&lt;/h4&gt;
                      &lt;h4 class="font-weight-light self-center h4"&gt;&lt;p&gt;Email: &lt;span class="font-weight-lighter"&gt; {{ email }}&lt;/span&gt;&lt;/p&gt;&lt;/h4&gt;
                      &lt;h4 class="font-weight-light self-center h4"&gt;&lt;p&gt;Bill Month: &lt;span class="font-weight-lighter"&gt; {{ bill_month }}&lt;/span&gt;&lt;/p&gt;&lt;/h4&gt;
                      &lt;h4 class="font-weight-light self-center h4"&gt;&lt;p&gt;Due date: &lt;span class="font-weight-lighter"&gt; 5 days from this invoice&lt;/span&gt;&lt;/p&gt;&lt;/h4&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/header&gt;
      &lt;/div&gt;
      &lt;hr class="bg-primary"&gt;
      &lt;h6 class="font-weight-lighter self-center h6"&gt;&lt;p&gt;Paid status: {{payment_status}}&lt;/p&gt;&lt;/h6&gt;
      &lt;hr class="bg-primary"&gt;
  
      &lt;div class="container-fluid"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-6"&gt;
                  &lt;label class="font-weight-light self-center h2"&gt;All users that sent sms:&lt;/label&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-4"&gt;
                          &lt;!-- dict object all _sms_sent is garnered from the views and parsed accordingly as key &amp; value of all_sms_sent.items --&gt;
                          {% for key, value in all_sms_sent.items %}
                          &lt;h4 class="font-weight-lighter h4"&gt;username&lt;/h4&gt;
                          {% for val in value %}
                          &lt;p&gt;{{ val.user }}&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-4"&gt;
                          &lt;h4 class="font-weight-lighter h4"&gt;Company&lt;/h4&gt;
                          &lt;p&gt;{{ val.user.company_name }}&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-4"&gt;
                          &lt;h4 class="font-weight-lighter h4"&gt;Total sent&lt;/h4&gt;
                           &lt;p&gt;{{ val.total_sent_single_user }}&lt;/p&gt;
                           {% endfor %}
                           {% endfor %}
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-6"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-6"&gt;
                          &lt;h4 class="font-weight-light self-center h4"&gt;Total sms sent in the month:&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-6"&gt;
                          &lt;p&gt;{{ total_amount_sent }}&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;br&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-6"&gt;
                          &lt;h4 class="font-weight-light self-center h4"&gt;Price per text:&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-6"&gt;
                          &lt;p&gt;0.70 Birr&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;br&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-6"&gt;
                          &lt;h4 class="font-weight-light self-center h4"&gt;V.A.T:&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-6"&gt;
                          &lt;p&gt;{{ vat }} Birr&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;br&gt;
                  &lt;/div&gt;
                  &lt;br&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-6"&gt;
                          &lt;h4 class="font-weight-light self-center h4"&gt;Total:&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-6"&gt;
                          &lt;p&gt;{{ total_price }} Birr&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;br&gt;
      &lt;br&gt;
      &lt;div class="container-fluid align-items-center align-middle bg-primary"&gt;
          &lt;footer&gt;
              &lt;div class="row text-white"&gt;
                  &lt;div class="col-md-4"&gt;
                      &lt;h4 class="font-weight-light self-center h4"&gt;&lt;p&gt;Address&lt;/p&gt;&lt;/h4&gt;
                      &lt;p class="quote font-weight-light center"&gt;Ethiopia, Addis Ababa, Kirkos sub-city, woreda 02,  House No. 700.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-4"&gt;
                      &lt;img src="{% static 'ui/images/logo.jpg' %}" width="50" height="40" class="d-inline-block align-top navbar-brand" alt=""&gt;
                      &lt;br&gt;
                      &lt;a href="www.sms.et" class="text-white blockquote"&gt;www.sms.et&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-4"&gt;
                      &lt;p class="quote font-weight-light center"&gt;Outstanding bill must be settled 5 days after issuance of this service invoice.&lt;/p&gt;
                      &lt;p class="quote font-weight-light center"&gt;Any questions can be forwared to us via our phone number: +251977207777&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/footer&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The problem is that weasyprint is not rendering the bootstrap 4 css as expected, i.e. as written above.
  This is a question <a href="https://stackoverflow.com/questions/49496398/bootstrap-css-is-not-applied-in-weasyprint">Bootstrap CSS is not applied in weasyprint
  </a> that comes close to my problem but the solutions described made no difference.
  Just to clarify, this is how it was supposed to look like (the html version):
  <a href="https://i.stack.imgur.com/r6XPF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r6XPF.png" alt="how it was supposed to look like"></a>.
  But it ended up looking like this:
  <a href="https://i.stack.imgur.com/E5JHP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E5JHP.png" alt="first of two pages"></a>
  and this:
  <a href="https://i.stack.imgur.com/bPV4L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bPV4L.png" alt="second of two pages"></a>
  Can anybody please help?</p>
  
  <h2>Edited to include urls.py of project and app</h2>
  
  <p>this is the urls.py from the project:</p>
  
  <pre class="lang-py prettyprint-override"><code>urlpatterns = [
      # for the ui app
      path('ui/', include('ui.urls')),
  ]
  </code></pre>
  
  <p>and this is the urls.py for the ui app:</p>
  
  <pre class="lang-py prettyprint-override"><code>from django.urls import path
  from . import views
  
  app_name = "ui"
  
  urlpatterns = [
      path('homepage/', views.homepage, name="homepage"),
      path('login/', views.login_request, name="login"),
      path('dashboard/&lt;username&gt;/', views.dashboard, name="dashboard"),
      path('logout/', views.logout_request, name="logout"),
      path('register/', views.register_request, name="register"),
      path('ajax/dashboard_update/', views.ajax_dashboard_update, name="ajax_dashboard_update"),
      path('&lt;username&gt;/invoice/', views.invoice_generator, name="invoice_generator"),
  ]
  </code></pre>