Why the right column breaks and goes below of the left one in a bootstrap row?

Question

I have a portal which displays two columns in a row At the top of the columns they are displayed correctly, but when I scroll down the left column breaks and continues just where the left column data ends and also breaks the column layout.

This doesn't happen all the time, sometimes both columns are rendered correctly, sometimes it breaks near the end of the left column sometimes not like in this example.

I'm suspecting that's something related to the data, but I have no idea what could be

This is the TOP

This is where it breaks

And this is where it continues at the bottom

This is the code for both columns, it is rendered by Python Flask

<div class="ms-5 me-5">
        <div class="row">
            <div class="col-6">
                {% for project in matched_projects %}
                    <div class="mt-5 {{ project.matching_score }}">
                        {% if project.budget_min <= 10 %}
                            <div style="background-color: #f6f1f131;">
                        {% else %}
                            {% if project.budget_min <= 30 %}
                                <div style="background-color: #ffff0020;">
                            {% else %}
                                {% if project.budget_min <= 250 %}
                                    <div style="background-color: #00ff2620;">
                                {% else %}
                                    {% if project.budget_min > 250 %}
                                        <div style="background-color: #ff190020;">
                                    {% endif %}
                                {% endif %}
                            {% endif %}
                        {% endif %}

                            <div class="p-3">
                                <div class="row">
                                    <div class="col text-break"><h4><strong>{{ project.title }}</strong></h4></div>
                                    <div class="col-2 text-end">{{ project.bid_stats_bid_count }} bids</div>
                                    <div class="col-2 text-end submitdate">{{ project.elapsed_time }}</div>
                                </div>

                                <div class="row">
                                    <div class="col">Budget {{ project.budget_min }} - {{ project.budget_max }} - {{ project.currency_code }}</div>
                                    <div class="col text-end"><strong>{{ project.match_percentage }}%</strong></div>
                                </div>
                                {% if project.currency_not_usd %}
                                    <div class="row">
                                        <div class="col">Budget in USD: {{ project.converted_min_usd }} - {{ project.converted_max_usd }}</div>
                                    </div>
                                {% endif %}

                                <div class="row">
                                    <div class="col mb-3"><strong>Keywords: {{ project.keywords }}</strong></div>
                                </div>

                                <div class="row">
                                    <div class="col text-break word-break table-text mb-4 ms-3 me-3"  style="white-space: pre-wrap;">{{ project.description }}</div>
                                </div>

                                <div class="row">
                                    <div class="col">
                                        <a href="https://www.freelancer.com/projects/{{ project.seo_url }}" target="_blank">https://www.freelancer.com/projects/{{ project.seo_url }}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>

            <div class="col">
                {% if unmatched_projects %}
                    {% for project in unmatched_projects %}
                        <div class="mt-5">
                            {% if project.budget_min <= 10 %}
                                <div style="background-color: #0084ff20;">
                            {% else %}
                                {% if project.budget_min <= 30 %}
                                    <div style="background-color: #ffff0020;">
                                {% else %}
                                    {% if project.budget_min <= 250 %}
                                        <div style="background-color: #00ff2620;">
                                    {% else %}
                                        {% if project.budget_min >= 750 %}
                                            <div style="background-color: #ff190020;">
                                        {% endif %}
                                    {% endif %}
                                {% endif %}
                            {% endif %}
                                <div class="p-3">
                                    <div class="row">
                                        <div class="col"><h4><strong>{{ project.title }}</strong></h4></div>
                                        <div class="col-2 text-end">{{ project.bid_stats_bid_count }} bids</div>
                                        <div class="col-2 text-end submitdate">{{ project.elapsed_time }}</div>
                                    </div>

                                    <div class="row">
                                        <div class="col">Budget {{ project.budget_min }} - {{ project.budget_max }} - {{ project.currency_country }}</div>
                                    </div>

                                    {% if project.currency_not_usd %}
                                        <div class="row">
                                            <div class="col">Budget in USD: {{ project.converted_min_usd }} - {{ project.converted_max_usd }}</div>
                                        </div>
                                    {% endif %}

                                    <div class="row">
                                        <div class="col mb-3"><strong>Unmatched</strong></div>
                                    </div>

                                    <div class="row">
                                        <div class="col text-break mb-4 ms-3 me-3"  style="white-space: pre-wrap;">{{ project.description }}</div>
                                    </div>

                                    <div class="row">
                                        <div class="col">
                                            <a href="https://www.freelancer.com/projects/{{ project.seo_url }}" target="_blank">https://www.freelancer.com/projects/{{ project.seo_url }}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                {% endif %}
            </div>
        </div>
    </div>

Answer 1

The if-else-condition for unmatched_projects contains a logic error. Because of this, the div element is not always created and the columns are not respected.

Unlike the matched_projects, the value range for the minimum budget of 251 < 749 is omitted. This can result from a typo, but causes the error to occur because no else condition is defined for the value range.

I also recommend using elif instead of nesting various if-conditions.

{% if project.budget_min <= 10 %}
    <div style="background-color: #0084ff20;">
{% elif project.budget_min <= 30 %}
    <div style="background-color: #ffff0020;">
{% elif project.budget_min <= 250 %}
    <div style="background-color: #00ff2620;">
{% elif project.budget_min >= 750 %} {# <-- Maybe you mean > 250?! #}
    <div style="background-color: #ff190020;">
{% else %}
    <div> {# <-- If you actually meant >= 750, you need an else block. #}
{% endif %}