Sample on how to use css with flask wtf componets (wtf.quick_form)

login.css

.btn {
    display: block;
    width: 100%;
    position: relative;
}

.form-group {
    text-align: start;
}

ul.checkList li::before {
  content: "\2705";
  display: inline-block;
  width: 5em;
  margin-left: -3em;
}

main.css

html * {
    font-family: "Bodoni MT";
    background-color: #F0F8FF;
}

ul {
    text-align: start;
    list-style: none;
}

img {
    max-width: 30px;
}

wtf_sample.html

{% extends 'base.html' %}
{% import 'macros.html' as macros %}
{% import 'bootstrap/wtf.html' as wtf %}

{% block head %}
    {{ super() }}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/login.css') }}">
{% endblock %}


{% block title %}
    {{ super() }} Bienvenido bandido
{% endblock %}

{% block content %}

    {% if user_ip %}
        <div class="container" style="text-align: center;">

        <div style="margin-block: 32px">
            <img
                    style="max-width: 50%; align-content: center"
                    src="{{ url_for('static',filename='images/party_boy_bart.jpg') }}"
            >
        </div>

            <h1>Hola 👋 {{ user_ip }} bienvenido a PyTask</h1>
            <h2>El mejor manejaro de tareas en la vía láctea 🌌</h2>

            </br>

            <div class="container col-lg-4 col-md-4 col-sm-6">
                <form
                        action="{{ url_for('hello') }}"
                        method="post">
                    {{ wtf.quick_form(login_form,
                            button_map={'submit': 'btn btn-success'}
                            ) }}
                </form>
            </div>

            </br>

            <div class="container col-lg-4 col-md-4 col-sm-6">
                <ul class="checkList">
                    {% for todo in todos %}
                        {{ macros.render_todo(todo) }}
                    {% endfor %}
                </ul>
            </div>

        </div>
    {% else %}
        <a href="{{ url_for('index') }}">Ir a inicio</a>
    {% endif %}
{% endblock %}