Bootstrap row doesn't put elements in a row

October 18, 2022

I wanted to put elements in my nav menu in a row, so I used bootstrap 5.0 row class, but they still land one below another.
I am doing a Flask project, so I am using Jinja to some extent.

base.html

<body>
    <div class = "container">
        {% block body %}
        {% endblock %}
    </div>
</body>

panel.html

{% block body %}
    <nav class="navbar sticky-top">
        <div class="fixed-top" style="width: 100%; max-width: 100%; height: 100px; background-color: #2E2E2E;">
            <nav class="container-wide navbar navbar-expand-lg">
                <div class = "row">
                    <a id="rbf-main" style="font-size:40px" href= "{{ url_for ('home') }}">RBF</a>
                    <a class ="rbf-link" href= "{{ url_for ('home') }}">Remove more Big Files</a>
                </div>
            </nav>
        </div>
    </nav>
{% endblock %}

>Solution :

Your elements in the row have to get "col-" classes.
Bootstrap is based on a 12 column layout, so if you want to have your rbf-main and rbf-link in one row, they should both have classes like that.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class = "row">
  <a class="col-12 col-sm-6" id="rbf-main" style="font-size:40px" href= "{{ url_for ('home') }}">RBF</a>
  <a class="col-12 col-sm-6 rbf-link" href= "{{ url_for ('home') }}">Remove more Big Files</a>
</div>

The elements share one row at viewport size sm. You can use any other viewportsize.