CODEWITHSUNDEEP
csstwitter-bootstrap
Dawn17
Dawn17

Reputation: 8297

fixing the layout with bootstrap flask

<!DOCTYPE html>
    <html>
        <head>
            <title>GucciGang Website</title>
            <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.css') }}">
        </head>
        <body>
            <header>
                <div class="navbar navbar-inverse">
                    <div class="navbar-inner">
                        <a class="brand" href="/">Real Python (for the web!)</a>
                        <ul class="nav">
                            <li class="active"><a href="/">Home</a></li>
                            <li><a href="/welcome">Welcome</a></li>
                            <li><a href="/">222</a></li>
                        </ul>
                    </div>
                </div>
            </header>
            <div class="container">
                {% block content%}
                {% endblock %}
            </div>
        </body>
    </html>

With the template.html above with Bootstrap, I expected my page to look like

enter image description here

but it actually looks like

enter image description here

Which part of my code is wrong? Am I missing something?

Upvotes: 1

Views: 54

Answers (1)

Harry Adel
Harry Adel

Reputation: 1436

Just add navbar-nav class to your unordered list tag

<ul class="nav navbar-nav">

https://www.w3schools.com/bootstrap/bootstrap_navbar.asp

Upvotes: 1

Related Questions