Bootstrap row doesn't put elements in a row-CodePudding

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 >
        <div  style="width: 100%; max-width: 100%; height: 100px; background-color: #2E2E2E;">
            <nav >
                <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 %}

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class = "row">
  <a  id="rbf-main" style="font-size:40px" href= "{{ url_for ('home') }}">RBF</a>
  <a  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.