'Fix side Navbar in Apache flask template

I am using bootstrap with python flask to create a page with side navbar. I would like the navbar to always stay on top left when I am scrolling through the web content. What changes do I need in my template to fix my side navbar? Do I need to include css styles and fix navbar with .navbar?

<!doctype html>
<html>
    <head>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <title>
            {% block title %} {% endblock %}
        </title>
    </head>
    <body>
        <div class = "row">
            <div class="col-md-6" >
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="http://127.0.0.1:5000/">Home</a>
                    </li>
                    <li class="nav-item">
                         <a class="nav-link" href="http://127.0.0.1:5000/test">test</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled">Disabled</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-6"
                {% block content %} {% endblock %}
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    </body>
</html>
cssflaskbootstrap-4navbar


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions