Aula 31 – Loja Online – Django – Tutorial Bootstrap – Barra de navegação

More videos
   

Aula 31 – Loja Online – Django – Tutorial Bootstrap – Barra de navegação – Navbar

Tutorial Bootstrap - Navbar

Tutorial Bootstrap – Navbar

Voltar para página principal do blog

Todas as aulas desse curso

Aula 30                 Aula 32

Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook

Esse é o link do código fluente no Pinterest

Meus links de afiliados:

Hostinger

Digital Ocean

One.com

Melhore seu NETWORKING

Participe de comunidades de desenvolvedores:

Fiquem a vontade para me adicionar ao linkedin.

E também para me seguir no GITHUB.

Ah, se puder, clica na estrela nos meus repositórios pra dá uma força ao meu perfil no GITHUB

Código final da aula:

https://github.com/toticavalcanti/django_ecommerce/tree/bootstrap_navbar

Tutorial Bootstrap – Navbar

Vamos começar colocando uma navbar bem básica do bootstrap, ela tem só a logo do bootstrap.

Perceba que não definimos ela como fluid, mas, por padrão, a navbar é fluid no bootstrap.

/templates/bootstrap/example.html


<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <title>Bootstrap example</title>
    </head>
    <body>
        <!-- Image and text -->
        <nav class="navbar navbar-light bg-light">
            <a class="navbar-brand" href="#">
                <img src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
                Bootstrap
            </a>
        </nav>
        <div class='container'>
            <div class="row">
                <div class="col-12">
                    <div class="alert alert-secondary" role="alert">
                          Navbar
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 ml-auto">
                    <div class="alert alert-primary" role="alert">
                        <input type="text" class="form-control" placeholder="search">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-11 col-lg-2 order-1">
                    <div class="alert alert-primary" role="alert"'>
                        Conteúdo superior
                    </div>
                </div>
                <div class="col-11 mx-auto col-lg-8 order-6">
                    <div class="alert alert-primary" role="alert" style='min-height: 800px;'>
                        Área do conteúdo principal
                        <div class="row">
                            <div class="col-auto">
                                <div class="alert alert-primary" role="alert">
                                    A simple primary alert—check it out!
                                </div>
                           </div>
                           <div class="col-6">
                               <div class="alert alert-secondary" role="alert">
                                    A simple secondary alert—check it out!
                               </div>
                           </div>
                         </div>
                    </div>
                </div>
                <div class="col-11 mx-auto col-lg-2 order-12">
                    <div class="alert alert-primary" role="alert"'>
                         Conteúdo da parte inferior
                    </div>
                </div>
            </div>
        </div>
        <div class='container'>
            <div class="row">
                <div class="col-1">
                    <div class="alert alert-primary" role="alert">
                        A simple primary alert—check it out!
                    </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>              
            </div>
        </div>
        <div class='container-fluid'>
            <div class="row">
                <div class="col-1">
                    <div class="alert alert-primary" role="alert">
                        A simple primary alert—check it out!
                    </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
            </div>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </body>
</html>

Veja o resultado:

http://127.0.0.1:8000/bootstrap/

Vamos colocar a navbar dentro de um container.

/templates/bootstrap/example.html


<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <title>Bootstrap example</title>
    </head>
    <body>
        <div class='container'>
            <!-- Image and text -->
            <nav class="navbar navbar-light bg-light">
                <a class="navbar-brand" href="#">
                    <img src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
                    Bootstrap
                </a>
            </nav>
        </div>
        <div class='container'>
            <div class="row">
                <div class="col-12">
                    <div class="alert alert-secondary" role="alert">
                          Navbar
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 ml-auto">
                    <div class="alert alert-primary" role="alert">
                        <input type="text" class="form-control" placeholder="search">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-11 col-lg-2 order-1">
                    <div class="alert alert-primary" role="alert"'>
                        Conteúdo superior
                    </div>
                </div>
                <div class="col-11 mx-auto col-lg-8 order-6">
                    <div class="alert alert-primary" role="alert" style='min-height: 800px;'>
                        Área do conteúdo principal
                        <div class="row">
                            <div class="col-auto">
                                <div class="alert alert-primary" role="alert">
                                    A simple primary alert—check it out!
                                </div>
                           </div>
                           <div class="col-6">
                               <div class="alert alert-secondary" role="alert">
                                    A simple secondary alert—check it out!
                               </div>
                           </div>
                         </div>
                    </div>
                </div>
                <div class="col-11 mx-auto col-lg-2 order-12">
                    <div class="alert alert-primary" role="alert"'>
                         Conteúdo da parte inferior
                    </div>
                </div>
            </div>
        </div>
        <div class='container'>
            <div class="row">
                <div class="col-1">
                    <div class="alert alert-primary" role="alert">
                        A simple primary alert—check it out!
                    </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>              
            </div>
        </div>
        <div class='container-fluid'>
            <div class="row">
                <div class="col-1">
                    <div class="alert alert-primary" role="alert">
                        A simple primary alert—check it out!
                    </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
            </div>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </body>
</html>

Veja o resultado:

http://127.0.0.1:8000/bootstrap/

Vamos colocar uma cor diferente no navbar.

Veja a documentação de cores do bootstrap para mais detalhes.

/templates/bootstrap/example.html


<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <title>Bootstrap example</title>
    </head>
    <body>
        <div class='container'>
            <!-- Image and text -->
            <nav class="navbar navbar-dark bg-dark">
                <a class="navbar-brand" href="#">
                    <img src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
                    Bootstrap
                </a>
            </nav>
        </div>
        <div class='container'>
            <div class="row">
                <div class="col-12">
                    <div class="alert alert-secondary" role="alert">
                          Navbar
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 ml-auto">
                    <div class="alert alert-primary" role="alert">
                        <input type="text" class="form-control" placeholder="search">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-11 col-lg-2 order-1">
                    <div class="alert alert-primary" role="alert"'>
                        Conteúdo superior
                    </div>
                </div>
                <div class="col-11 mx-auto col-lg-8 order-6">
                    <div class="alert alert-primary" role="alert" style='min-height: 800px;'>
                        Área do conteúdo principal
                        <div class="row">
                            <div class="col-auto">
                                <div class="alert alert-primary" role="alert">
                                    A simple primary alert—check it out!
                                </div>
                           </div>
                           <div class="col-6">
                               <div class="alert alert-secondary" role="alert">
                                    A simple secondary alert—check it out!
                               </div>
                           </div>
                         </div>
                    </div>
                </div>
                <div class="col-11 mx-auto col-lg-2 order-12">
                    <div class="alert alert-primary" role="alert"'>
                         Conteúdo da parte inferior
                    </div>
                </div>
            </div>
        </div>
        <div class='container'>
            <div class="row">
                <div class="col-1">
                    <div class="alert alert-primary" role="alert">
                        A simple primary alert—check it out!
                    </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>              
            </div>
        </div>
        <div class='container-fluid'>
            <div class="row">
                <div class="col-1">
                    <div class="alert alert-primary" role="alert">
                        A simple primary alert—check it out!
                    </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
            </div>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </body>
</html>

Veja o resultado:

http://127.0.0.1:8000/bootstrap/

Para melhorar a aparência do navbar e deixar ela ocupando toda a extensão da largura, vamos colocar só a logo do bootstrap no container e deixar a tag nav de fora.

/templates/bootstrap/example.html


<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <title>Bootstrap example</title>
    </head>
    <body>
        <!-- Image and text -->
        <nav class="navbar navbar-light bg-light">
            <div class='container'>
                <a class="navbar-brand" href="#">
                    <img src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
                    Bootstrap
                </a>
            </div>
        </nav>
        <div class='container'>
            <div class="row">
                <div class="col-12">
                    <div class="alert alert-secondary" role="alert">
                          Navbar
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 ml-auto">
                    <div class="alert alert-primary" role="alert">
                        <input type="text" class="form-control" placeholder="search">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-11 col-lg-2 order-1">
                    <div class="alert alert-primary" role="alert"'>
                        Conteúdo superior
                    </div>
                </div>
                <div class="col-11 mx-auto col-lg-8 order-6">
                    <div class="alert alert-primary" role="alert" style='min-height: 800px;'>
                        Área do conteúdo principal
                        <div class="row">
                            <div class="col-auto">
                                <div class="alert alert-primary" role="alert">
                                    A simple primary alert—check it out!
                                </div>
                           </div>
                           <div class="col-6">
                               <div class="alert alert-secondary" role="alert">
                                    A simple secondary alert—check it out!
                               </div>
                           </div>
                         </div>
                    </div>
                </div>
                <div class="col-11 mx-auto col-lg-2 order-12">
                    <div class="alert alert-primary" role="alert"'>
                         Conteúdo da parte inferior
                    </div>
                </div>
            </div>
        </div>
        <div class='container'>
            <div class="row">
                <div class="col-1">
                    <div class="alert alert-primary" role="alert">
                        A simple primary alert—check it out!
                    </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>              
            </div>
        </div>
        <div class='container-fluid'>
            <div class="row">
                <div class="col-1">
                    <div class="alert alert-primary" role="alert">
                        A simple primary alert—check it out!
                    </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
            </div>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </body>
</html>

Veja o resultado:

http://127.0.0.1:8000/bootstrap/

Vamos adicionar alguns links, para isso vamos criar uma lista.

/templates/bootstrap/example.html


<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <title>Bootstrap example</title>
    </head>
    <body>
        <!-- Image and text -->
        <nav class="navbar navbar-light bg-light">
            <div class='container'>
                <a class="navbar-brand" href="#">
                    <img src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
                    Bootstrap
                </a>
                <ul class='navbar-nav'>
                    <li class='nav-item'>
                        <a href='#' class='nav-link'>Home</a>
                    </li>
                    <li class='nav-item'>
                        <a href='#' class='nav-link'>About</a>
                    </li>
                    <li class='nav-item'>
                        <a href='#' class='nav-link'>Products</a>
                    </li>
                </ul>
            </div>
        </nav>
        <div class='container'>
            <div class="row">
                <div class="col-12">
                    <div class="alert alert-secondary" role="alert">
                          Navbar
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 ml-auto">
                    <div class="alert alert-primary" role="alert">
                        <input type="text" class="form-control" placeholder="search">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-11 col-lg-2 order-1">
                    <div class="alert alert-primary" role="alert"'>
                        Conteúdo superior
                    </div>
                </div>
                <div class="col-11 mx-auto col-lg-8 order-6">
                    <div class="alert alert-primary" role="alert" style='min-height: 800px;'>
                        Área do conteúdo principal
                        <div class="row">
                            <div class="col-auto">
                                <div class="alert alert-primary" role="alert">
                                    A simple primary alert—check it out!
                                </div>
                           </div>
                           <div class="col-6">
                               <div class="alert alert-secondary" role="alert">
                                    A simple secondary alert—check it out!
                               </div>
                           </div>
                         </div>
                    </div>
                </div>
                <div class="col-11 mx-auto col-lg-2 order-12">
                    <div class="alert alert-primary" role="alert"'>
                         Conteúdo da parte inferior
                    </div>
                </div>
            </div>
        </div>
        <div class='container'>
            <div class="row">
                <div class="col-1">
                    <div class="alert alert-primary" role="alert">
                        A simple primary alert—check it out!
                    </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>              
            </div>
        </div>
        <div class='container-fluid'>
            <div class="row">
                <div class="col-1">
                    <div class="alert alert-primary" role="alert">
                        A simple primary alert—check it out!
                    </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
            </div>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </body>
</html>

Veja o resultado:

http://127.0.0.1:8000/bootstrap/

O resultado não ficou tão legal né?

Mas, vamos melhorar isso!

Vamos envolver a lista em uma div com class colapse, veja no código.

/templates/bootstrap/example.html


<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <title>Bootstrap example</title>
    </head>
    <body>
        <!-- Image and text -->
        <nav class="navbar navbar-light bg-light">
            <div class='container'>
                <a class="navbar-brand" href="#">
                    <img src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
                    Bootstrap
                </a>
                <div class='collapse navbar-collapse' id='navbar-collapse-links'>
                    <ul class='navbar-nav'>
                        <li class='nav-item'>
                            <a href='#' class='nav-link>Home</a>
                        </li>
                        <li class='nav-item'>
                            <a href='#' class='nav-link>About</a>
                        </li>
                        <li class='nav-item'>
                            <a href='#' class='nav-link>Products</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class='container'>
            <div class="row">
                <div class="col-12">
                    <div class="alert alert-secondary" role="alert">
                          Navbar
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 ml-auto">
                    <div class="alert alert-primary" role="alert">
                        <input type="text" class="form-control" placeholder="search">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-11 col-lg-2 order-1">
                    <div class="alert alert-primary" role="alert"'>
                        Conteúdo superior
                    </div>
                </div>
                <div class="col-11 mx-auto col-lg-8 order-6">
                    <div class="alert alert-primary" role="alert" style='min-height: 800px;'>
                        Área do conteúdo principal
                        <div class="row">
                            <div class="col-auto">
                                <div class="alert alert-primary" role="alert">
                                    A simple primary alert—check it out!
                                </div>
                           </div>
                           <div class="col-6">
                               <div class="alert alert-secondary" role="alert">
                                    A simple secondary alert—check it out!
                               </div>
                           </div>
                         </div>
                    </div>
                </div>
                <div class="col-11 mx-auto col-lg-2 order-12">
                    <div class="alert alert-primary" role="alert"'>
                         Conteúdo da parte inferior
                    </div>
                </div>
            </div>
        </div>
        <div class='container'>
            <div class="row">
                <div class="col-1">
                    <div class="alert alert-primary" role="alert">
                        A simple primary alert—check it out!
                    </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>              
            </div>
        </div>
        <div class='container-fluid'>
            <div class="row">
                <div class="col-1">
                    <div class="alert alert-primary" role="alert">
                        A simple primary alert—check it out!
                    </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
            </div>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </body>
</html>

Veja o resultado:

http://127.0.0.1:8000/bootstrap/

Caraca, os links sumiram! E agora?

Precisamos criar um botão que nos permitirá ver os links.

Coloque o button abaixo da tag a da logo do bootstrap.

/templates/bootstrap/example.html


<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <title>Bootstrap example</title>
    </head>
    <body>
        <!-- Image and text -->
        <nav class="navbar navbar-light bg-light">
            <div class='container'>
                <a class="navbar-brand" href="#">
                    <img src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
                    Bootstrap
                </a>
                <button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbar-collapse-links' aria-expanded='false' aria-label='Toggle Navigation'>
                </button>
                <div class='collapse navbar-collapse' id='navbar-collapse-links'>
                    <ul class='navbar-nav'>
                        <li class='nav-item'>
                            <a href='#' class='nav-link>Home</a>
                        </li>
                        <li class='nav-item'>
                            <a href='#' class='nav-link>About</a>
                        </li>
                        <li class='nav-item'>
                            <a href='#' class='nav-link>Products</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class='container'>
            <div class="row">
                <div class="col-12">
                    <div class="alert alert-secondary" role="alert">
                          Navbar
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 ml-auto">
                    <div class="alert alert-primary" role="alert">
                        <input type="text" class="form-control" placeholder="search">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-11 col-lg-2 order-1">
                    <div class="alert alert-primary" role="alert"'>
                        Conteúdo superior
                    </div>
                </div>
                <div class="col-11 mx-auto col-lg-8 order-6">
                    <div class="alert alert-primary" role="alert" style='min-height: 800px;'>
                        Área do conteúdo principal
                        <div class="row">
                            <div class="col-auto">
                                <div class="alert alert-primary" role="alert">
                                    A simple primary alert—check it out!
                                </div>
                           </div>
                           <div class="col-6">
                               <div class="alert alert-secondary" role="alert">
                                    A simple secondary alert—check it out!
                               </div>
                           </div>
                         </div>
                    </div>
                </div>
                <div class="col-11 mx-auto col-lg-2 order-12">
                    <div class="alert alert-primary" role="alert"'>
                         Conteúdo da parte inferior
                    </div>
                </div>
            </div>
        </div>
        <div class='container'>
            <div class="row">
                <div class="col-1">
                    <div class="alert alert-primary" role="alert">
                        A simple primary alert—check it out!
                    </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>              
            </div>
        </div>
        <div class='container-fluid'>
            <div class="row">
                <div class="col-1">
                    <div class="alert alert-primary" role="alert">
                        A simple primary alert—check it out!
                    </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
            </div>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </body>
</html>

Veja o resultado:

http://127.0.0.1:8000/bootstrap/

Agora os links voltaram a ficar visíveis.

Vamos dá uma cara mais bonitinha ao botão usando uma div span com o class=’navbar-toggler-icon’.

/templates/bootstrap/example.html


<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <title>Bootstrap example</title>
    </head>
    <body>
        <!-- Image and text -->
        <nav class="navbar navbar-light bg-light">
            <div class='container'>
                <a class="navbar-brand" href="#">
                    <img src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
                    Bootstrap
                </a>
                <button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbar-collapse-links' aria-expanded='false' aria-label='Toggle Navigation'>
                    <span class='navbar-toggler-icon'></span>
                </button>
                <div class='collapse navbar-collapse' id='navbar-collapse-links'>
                    <ul class='navbar-nav'>
                        <li class='nav-item'>
                            <a href='#' class='nav-link>Home</a>
                        </li>
                        <li class='nav-item'>
                            <a href='#' class='nav-link>About</a>
                        </li>
                        <li class='nav-item'>
                            <a href='#' class='nav-link>Products</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class='container'>
            <div class="row">
                <div class="col-12">
                    <div class="alert alert-secondary" role="alert">
                          Navbar
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 ml-auto">
                    <div class="alert alert-primary" role="alert">
                        <input type="text" class="form-control" placeholder="search">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-11 col-lg-2 order-1">
                    <div class="alert alert-primary" role="alert"'>
                        Conteúdo superior
                    </div>
                </div>
                <div class="col-11 mx-auto col-lg-8 order-6">
                    <div class="alert alert-primary" role="alert" style='min-height: 800px;'>
                        Área do conteúdo principal
                        <div class="row">
                            <div class="col-auto">
                                <div class="alert alert-primary" role="alert">
                                    A simple primary alert—check it out!
                                </div>
                           </div>
                           <div class="col-6">
                               <div class="alert alert-secondary" role="alert">
                                    A simple secondary alert—check it out!
                               </div>
                           </div>
                         </div>
                    </div>
                </div>
                <div class="col-11 mx-auto col-lg-2 order-12">
                    <div class="alert alert-primary" role="alert"'>
                         Conteúdo da parte inferior
                    </div>
                </div>
            </div>
        </div>
        <div class='container'>
            <div class="row">
                <div class="col-1">
                    <div class="alert alert-primary" role="alert">
                        A simple primary alert—check it out!
                    </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>              
            </div>
        </div>
        <div class='container-fluid'>
            <div class="row">
                <div class="col-1">
                    <div class="alert alert-primary" role="alert">
                        A simple primary alert—check it out!
                    </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
            </div>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </body>
</html>

Veja o resultado:

http://127.0.0.1:8000/bootstrap/

Agora ficou mais legalzinho, principalmente para dispositivos mobile!

Só que ele tá se comportando igual, independente do tamanho da tela.

Se você for ver na documentação oficial do bootstrap, irá achar a propriedade navbar-expand-lg.

Mas, para customizar para nosso projeto vamos mudar de lg de large, para md de medium.

Vamos usar navbar-expand-md então.

/templates/bootstrap/example.html


<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <title>Bootstrap example</title>
    </head>
    <body>
        <!-- Image and text -->
        <nav class="navbar navbar-expand-md navbar-light bg-light">
            <div class='container'>
                <a class="navbar-brand" href="#">
                    <img src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
                    Bootstrap
                </a>
                <button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbar-collapse-links' aria-expanded='false' aria-label='Toggle Navigation'>
                    <span class='navbar-toggler-icon'></span>
                </button>
                <div class='collapse navbar-collapse' id='navbar-collapse-links'>
                    <ul class='navbar-nav'>
                        <li class='nav-item'>
                            <a href='#' class='nav-link>Home</a>
                        </li>
                        <li class='nav-item'>
                            <a href='#' class='nav-link>About</a>
                        </li>
                        <li class='nav-item'>
                            <a href='#' class='nav-link>Products</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class='container'>
            <div class="row">
                <div class="col-12">
                    <div class="alert alert-secondary" role="alert">
                          Navbar
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 ml-auto">
                    <div class="alert alert-primary" role="alert">
                        <input type="text" class="form-control" placeholder="search">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-11 col-lg-2 order-1">
                    <div class="alert alert-primary" role="alert"'>
                        Conteúdo superior
                    </div>
                </div>
                <div class="col-11 mx-auto col-lg-8 order-6">
                    <div class="alert alert-primary" role="alert" style='min-height: 800px;'>
                        Área do conteúdo principal
                        <div class="row">
                            <div class="col-auto">
                                <div class="alert alert-primary" role="alert">
                                    A simple primary alert—check it out!
                                </div>
                           </div>
                           <div class="col-6">
                               <div class="alert alert-secondary" role="alert">
                                    A simple secondary alert—check it out!
                               </div>
                           </div>
                         </div>
                    </div>
                </div>
                <div class="col-11 mx-auto col-lg-2 order-12">
                    <div class="alert alert-primary" role="alert"'>
                         Conteúdo da parte inferior
                    </div>
                </div>
            </div>
        </div>
        <div class='container'>
            <div class="row">
                <div class="col-1">
                    <div class="alert alert-primary" role="alert">
                        A simple primary alert—check it out!
                    </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>              
            </div>
        </div>
        <div class='container-fluid'>
            <div class="row">
                <div class="col-1">
                    <div class="alert alert-primary" role="alert">
                        A simple primary alert—check it out!
                    </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
            </div>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </body>
</html>

Veja o resultado:

http://127.0.0.1:8000/bootstrap/

Agora vamos criar um form inline no navbar, que vai abrigar a nossa search e seu botão de pesquisar.

Simplesmente vamos copiar e colar lá do site do bootstrap, só o form, a nav não.

Colocar também um ml-auto pra não ficar grudada com os links.

/templates/bootstrap/example.html


<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <title>Bootstrap example</title>
    </head>
    <body>
        <!-- Image and text -->
        <nav class="navbar navbar-expand-md navbar-light bg-light">
            <div class='container'>
                <a class="navbar-brand" href="#">
                    <img src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
                    Bootstrap
                </a>
                <button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbar-collapse-links' aria-expanded='false' aria-label='Toggle Navigation'>
                    <span class='navbar-toggler-icon'></span>
                </button>
                <div class='collapse navbar-collapse' id='navbar-collapse-links'>
                    <ul class='navbar-nav'>
                        <li class='nav-item'>
                            <a href='#' class='nav-link>Home</a>
                        </li>
                        <li class='nav-item'>
                            <a href='#' class='nav-link>About</a>
                        </li>
                        <li class='nav-item'>
                            <a href='#' class='nav-link>Products</a>
                        </li>
                    </ul>
                    <form class="form-inline ml-auto">
                        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                    </form>
                </div>
            </div>
        </nav>
        <div class='container'>
            <div class="row">
                <div class="col-12">
                    <div class="alert alert-secondary" role="alert">
                          Navbar
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 ml-auto">
                    <div class="alert alert-primary" role="alert">
                        <input type="text" class="form-control" placeholder="search">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-11 col-lg-2 order-1">
                    <div class="alert alert-primary" role="alert"'>
                        Conteúdo superior
                    </div>
                </div>
                <div class="col-11 mx-auto col-lg-8 order-6">
                    <div class="alert alert-primary" role="alert" style='min-height: 800px;'>
                        Área do conteúdo principal
                        <div class="row">
                            <div class="col-auto">
                                <div class="alert alert-primary" role="alert">
                                    A simple primary alert—check it out!
                                </div>
                           </div>
                           <div class="col-6">
                               <div class="alert alert-secondary" role="alert">
                                    A simple secondary alert—check it out!
                               </div>
                           </div>
                         </div>
                    </div>
                </div>
                <div class="col-11 mx-auto col-lg-2 order-12">
                    <div class="alert alert-primary" role="alert"'>
                         Conteúdo da parte inferior
                    </div>
                </div>
            </div>
        </div>
        <div class='container'>
            <div class="row">
                <div class="col-1">
                    <div class="alert alert-primary" role="alert">
                        A simple primary alert—check it out!
                    </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>              
            </div>
        </div>
        <div class='container-fluid'>
            <div class="row">
                <div class="col-1">
                    <div class="alert alert-primary" role="alert">
                        A simple primary alert—check it out!
                    </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
            </div>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </body>
</html>

Veja o resultado:

http://127.0.0.1:8000/bootstrap/

Vamos adicionar um menu suspenso, ou seja,um dropdown menu, na lista de links do nosso navbar.

É só copiar o que tá em laranja no código abaixo, ou então, do site do bootstrap.

/templates/bootstrap/example.html


<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <title>Bootstrap example</title>
    </head>
    <body>
        <!-- Image and text -->
        <nav class="navbar navbar-expand-md navbar-light bg-light">
            <div class='container'>
                <a class="navbar-brand" href="#">
                    <img src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
                    Bootstrap
                </a>
                <button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbar-collapse-links' aria-expanded='false' aria-label='Toggle Navigation'>
                    <span class='navbar-toggler-icon'></span>
                </button>
                <div class='collapse navbar-collapse' id='navbar-collapse-links'>
                    <ul class='navbar-nav'>
                        <li class='nav-item'>
                            <a href='#' class='nav-link>Home</a>
                        </li>
                        <li class='nav-item'>
                            <a href='#' class='nav-link>About</a>
                        </li>
                        <li class='nav-item'>
                            <a href='#' class='nav-link>Products</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Dropdown link
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </li>
                    </ul>
                    <form class="form-inline ml-auto">
                        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                    </form>
                </div>
            </div>
        </nav>
        <div class='container'>
            <div class="row">
                <div class="col-12">
                    <div class="alert alert-secondary" role="alert">
                          Navbar
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 ml-auto">
                    <div class="alert alert-primary" role="alert">
                        <input type="text" class="form-control" placeholder="search">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-11 col-lg-2 order-1">
                    <div class="alert alert-primary" role="alert"'>
                        Conteúdo superior
                    </div>
                </div>
                <div class="col-11 mx-auto col-lg-8 order-6">
                    <div class="alert alert-primary" role="alert" style='min-height: 800px;'>
                        Área do conteúdo principal
                        <div class="row">
                            <div class="col-auto">
                                <div class="alert alert-primary" role="alert">
                                    A simple primary alert—check it out!
                                </div>
                           </div>
                           <div class="col-6">
                               <div class="alert alert-secondary" role="alert">
                                    A simple secondary alert—check it out!
                               </div>
                           </div>
                         </div>
                    </div>
                </div>
                <div class="col-11 mx-auto col-lg-2 order-12">
                    <div class="alert alert-primary" role="alert"'>
                         Conteúdo da parte inferior
                    </div>
                </div>
            </div>
        </div>
        <div class='container'>
            <div class="row">
                <div class="col-1">
                    <div class="alert alert-primary" role="alert">
                        A simple primary alert—check it out!
                    </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>              
            </div>
        </div>
        <div class='container-fluid'>
            <div class="row">
                <div class="col-1">
                    <div class="alert alert-primary" role="alert">
                        A simple primary alert—check it out!
                    </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                </div>
                <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
                 <div class="col-1">
                     <div class="alert alert-primary" role="alert">
                         A simple primary alert—check it out!
                     </div>
                 </div>
                <div class="col-1">
                     <div class="alert alert-secondary" role="alert">
                          A simple secondary alert—check it out!
                     </div>
                 </div>
            </div>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </body>
</html>

Veja o resultado:

http://127.0.0.1:8000/bootstrap/

É isso pessoal, nos vemos na próxima!

Aula 30                 Aula 32

Todas as aulas desse curso

Voltar para página principal do blog

Código final da aula:

https://github.com/toticavalcanti/django_ecommerce/tree/bootstrap_navbar

Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook

Link do código fluente no Pinterest

Novamente deixo meus link de afiliados:

Hostinger

Digital Ocean

One.com

Obrigado, até a próxima e bons estudos. 😉

(Visited 67 times, 2 visits today)
About The Author
-

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>