Fix bootstrap table in weasyprint generated PDF

Question

I'm trying to create a PDF table with Weasyprint in my Django website. The same table is shown in a html page and with Weasyprint. When I use bootstrap colors in the html version it shows correctly, but the colors are lost on the Weasyprint version. That is the only feature missing on the Weasyprint version, which works otherwise.

views.py

@login_required
def scale_answer_pdf(request, scale_id):
    scale = get_object_or_404(UserScale, pk=scale_id)
    if scale.user == request.user or request.user.is_superuser:
        if scale.scale_meta.title == "Now":
            choices = NowLegend
            class ScaleForm(forms.ModelForm):
                class Meta:
                    model = NowModel
                    fields = labellist(NowLabels)
                    labels = NowLabels
        if scale.scale_meta.title == "Child":
            choices = NowLegend
            class ScaleForm(forms.ModelForm):
                class Meta:
                    model = ChildModel
                    fields = labellist(ChildLabels)
                    labels = ChildLabels
        form = ScaleForm(instance=scale)
        **html = render_to_string('diagnosis/scale_answer_pdf.html', 
{'form': form, 'scale':scale, 'choices':choices})
        response = HttpResponse(content_type='application/pdf')
        response['Content-Disposition'] = 'filename="{} - {} - 
{}.pdf"'.format(scale.scale_meta.title, scale.user.username, 
scale.created.strftime('%Y-%m-%d'))
       weasyprint.HTML(string=html, 
base_url=request.build_absolute_uri()).write_pdf(response, 
presentational_hints=True, stylesheets= 
[weasyprint.CSS(settings.STATIC_ROOT + '/css/sb-admin-2.min.css'), 
weasyprint.CSS(settings.STATIC_ROOT +'/css/all.min.css')])
        return response**
    else:
        raise Http404

html for the PDF - the boostrap CSS works, and the table is also showing. But the colors from the table don't. I highlight the table parts that don't show colors

    {% extends "base_pdf.html" %}
{% load i18n %}
{% load staticfiles %}
{% load get_item %}
{% block content %}
<div class="container-fluid">
     <div class="row">
<div class="col-sm-6 mx-auto" >
    <p class="text-center"><img height="120" width="120" src="{{scale.scale_meta.icon.url}}" alt="Test icon" class="img-fluid"></p>
    </br>
    <h1 class="text-center">{{scale.meta.title}}</h1>
        {% with scale.created as created %}
        {% with scale.user.username as username %}
    <h4 class="text-center">{% blocktrans %}Created the {{created}} by {{username}}{% endblocktrans %}</h4>
    </br>

  <table class="table table-striped">
       <tbody>
        **<tr class="table-info">**
    <td>{% trans "Question" %}<td>
    <td>{% trans "Answer type" %}<td>
    <td>{% trans "Answer" %}<td>
        </tr>
    {% for field in form %}
    {% with name=field.name %}
    {% if choices|get_item:name == "0 to 6" %}
        {% if field.value > "4" %}
        **<tr class="table-danger">**
        {% endif %}
         {% if field.value > "2" and field.value < "5" %}
        **<tr class="table-warning">**
        {% endif %}
        {% if field.value <= "2" %}
        **<tr class="table-success">**
        {% endif %}
    {% elif choices|get_item:name == "0 to 10" %}
        {% if field.value <= "4" %}
        **<tr class="table-danger">**
        {% endif %}
         {% if field.value > "4" and field.value < "7" %}
        **<tr class="table-warning">**
        {% endif %}
        {% if field.value >= "7" %}
        **<tr class="table-success">**
        {% endif %}
    {% endif %}
    <td>{{field.label}}<td>
    <td>{{choices|get_item:name}}<td>
    <td >{{field.value}}<td>
        </tr>
    {% endwith %}
    {% endfor %}
    </tbody>
</table>
</div>
     </div>
</div>
 <br/>
 <br/>
{% endwith %}
{% endwith %}
{% endblock %}

Answer 1

BootStrap and files.CSS don't work right in weasyprint,

Is better you use CSS <style> in Html File.

Like that:

<style> /* use CSS into style */
      @page {
        size: A4; /* Change from the default size of A4 */
        margin: 3.5mm; /* Set margin on each page */
      }
</style>

Bye.