Aula 29 – Loja Online – Django – Tutorial Bootstrap – Breakpoints

Aula 29 – Loja Online – Django – Tutorial Bootstrap – Breakpoints

Breakpoints mobile first

Breakpoints mobile first

Voltar para página principal do blog

Todas as aulas desse curso

Aula 28                 Aula 30

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/breakpoints

Mobile first

Chegou a hora de usar os pontos de ruptura, em inglês, breakpoints, para adequar a tela do browser as configurações dos dispositivos (mobile, tablet, desktop, laptop, etc.).

O bootstrap é mobile first.

Isso que dizer que ele primeiro se preocupa com o formato de tela de celular, antes de qualquer outro dispositivo.

O bootstrap prioriza a experiência de usuário mobile.

Breakpoints

Breakpoints são “coisinhas” como essas aí em baixo destacadas em azul, escritas no html do bootstrap:

col-sm-

col-md- 

col-lg-

col-xl-

  • colcolumn
  • md medium
  • lg – large
  • xlextra large

Para detalhes acesse a documentação:

https://getbootstrap.com.br/docs/4.1/layout/grid/ 

Vamos começar deletando a div Home que não iremos usar.

Em seguida, vamos fazer uma pequena alteração no search.

É o que tá em laranja no código abaixo.

/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'>
            <div class="row">
                <div class="col-12">
                    <div class="alert alert-secondary" role="alert">
                          Navbar
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12 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-2 order-1">
                    <div class="alert alert-primary" role="alert" style='min-height: 800px;'>
                        Primeiro item
                    </div>
                </div>
                <div class="col-8 order-6">
                    <div class="alert alert-primary" role="alert" style='min-height: 800px;'>
                        Segundo item
                    </div>
                </div>
                <div class="col-2 order-12">
                    <div class="alert alert-primary" role="alert" style='min-height: 800px;'>
                         Terceiro item
                    </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>

Acesse:

http://127.0.0.1:8000/bootstrap/

Veja que agora, o search ocupa toda a largura da tela quando você muda o tamanho da tela do browser, faça o teste.

É aí que o breakpoint entra em ação.

Vamos adicionar os breakpoints.

Adicione ao search col-sm-2.

/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'>
            <div class="row">
                <div class="col-12">
                    <div class="alert alert-secondary" role="alert">
                          Navbar
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-sm-2 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-2 order-1">
                    <div class="alert alert-primary" role="alert" style='min-height: 800px;'>
                        Primeiro item
                    </div>
                </div>
                <div class="col-8 order-6">
                    <div class="alert alert-primary" role="alert" style='min-height: 800px;'>
                        Segundo item
                    </div>
                </div>
                <div class="col-2 order-12">
                    <div class="alert alert-primary" role="alert" style='min-height: 800px;'>
                         Terceiro item
                    </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>

Acesse:

http://127.0.0.1:8000/bootstrap/

Faça o seguinte teste, mude a largura da tela do browser com o mouse.

Veja que a search agora ocupa toda a largura da tela quando a largura do browser tá em determinado limite de largura.

Quando ultrapassamos esse limite, significa que atingiu o breakpoint, aí o search fica menor, fica com tamanho 2 de 12, que é a largura total da tela do browser para o bootstrap.

Essa configuração de breakpoint não ficou legal, vamos mudar isso.

Vamos trocar o col-sm-2 para col-sm-12 e colocar o col-md-6

/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'>
            <div class="row">
                <div class="col-12">
                    <div class="alert alert-secondary" role="alert">
                          Navbar
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-sm-12 col-md-6 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-2 order-1">
                    <div class="alert alert-primary" role="alert" style='min-height: 800px;'>
                        Primeiro item
                    </div>
                </div>
                <div class="col-8 order-6">
                    <div class="alert alert-primary" role="alert" style='min-height: 800px;'>
                        Segundo item
                    </div>
                </div>
                <div class="col-2 order-12">
                    <div class="alert alert-primary" role="alert" style='min-height: 800px;'>
                         Terceiro item
                    </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>

Acesse e teste novamente:

http://127.0.0.1:8000/bootstrap/

Agora começou a ficar um pouco melhor. 😉

Mas, note que quando você aumenta a largura da tela do browser, o search tá ficando muito grande ainda.

Vamos tentar melhorar isso então?

Coloque no search: col-lg-4

/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'>
            <div class="row">
                <div class="col-12">
                    <div class="alert alert-secondary" role="alert">
                          Navbar
                    </div>
                </div>
            </div>
            <div class="row">
                <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-2 order-1">
                    <div class="alert alert-primary" role="alert" style='min-height: 800px;'>
                        Primeiro item
                    </div>
                </div>
                <div class="col-8 order-6">
                    <div class="alert alert-primary" role="alert" style='min-height: 800px;'>
                        Segundo item
                    </div>
                </div>
                <div class="col-2 order-12">
                    <div class="alert alert-primary" role="alert" style='min-height: 800px;'>
                         Terceiro item
                    </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>

Acesse:

http://127.0.0.1:8000/bootstrap/

Faça o teste de novo.

Agora sim, vamos deixar a search desse jeito por enquanto.

Divs Primeiro item, Segundo item e Terceiro item

Agora vamos mexer nas divs que tem: Primeiro item, Segundo item e Terceiro item.

A div Terceiro item vai virar a div Conteúdo da parte inferior.

Tire o estilo style=’min-height: 800px; dela, não queremos mais essa altura.

Vamos fazer o mesmo com o Primeiro item também.

Ou seja, remova o style=’min-height: 800px; do Primeiro item e do Terceiro item.

Então, o html vai ficar assim.

/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'>
            <div class="row">
                <div class="col-12">
                    <div class="alert alert-secondary" role="alert">
                          Navbar
                    </div>
                </div>
            </div>
            <div class="row">
                <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-2 order-1">
                    <div class="alert alert-primary" role="alert"'>
                        Primeiro item
                    </div>
                </div>
                <div class="col-8 order-6">
                    <div class="alert alert-primary" role="alert" style='min-height: 800px;'>
                        Segundo item
                    </div>
                </div>
                <div class="col-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>

Acesse e teste:

http://127.0.0.1:8000/bootstrap/

Para fazer a div do Conteúdo da parte inferior ficar na posição que queremos, mude o col-2 para col-12.

/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'>
            <div class="row">
                <div class="col-12">
                    <div class="alert alert-secondary" role="alert">
                          Navbar
                    </div>
                </div>
            </div>
            <div class="row">
                <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-2 order-1">
                    <div class="alert alert-primary" role="alert"'>
                        Primeiro item
                    </div>
                </div>
                <div class="col-8 order-6">
                    <div class="alert alert-primary" role="alert" style='min-height: 800px;'>
                        Segundo item
                    </div>
                </div>
                <div class="col-12 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>

Acesse:

http://127.0.0.1:8000/bootstrap/

Porque aconteceu esse efeito?

Primeiro por causa do col-12 e também porque o primeiro item tá com col-2, o segundo com col-8, e 8 + 2 = 10.

Como o terceiro item, agora chamado de Conteúdo da parte inferior, tá com col-12, ele não vai caber na primeira linha, por isso, cai para segunda, mesmo sem criar uma nova row. 🤔

Seguindo

Vamos agora chamar o Primeiro item de Conteúdo superior, e colocar ele no topo da página com:

col-12 col-lg-2 

/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'>
            <div class="row">
                <div class="col-12">
                    <div class="alert alert-secondary" role="alert">
                          Navbar
                    </div>
                </div>
            </div>
            <div class="row">
                <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-12 col-lg-2 order-1">
                    <div class="alert alert-primary" role="alert"'>
                        Conteúdo superior
                    </div>
                </div>
                <div class="col-8 order-6">
                    <div class="alert alert-primary" role="alert" style='min-height: 800px;'>
                        Segundo item
                    </div>
                </div>
                <div class="col-12 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>

Acesse:

http://127.0.0.1:8000/bootstrap/

Área do conteúdo principal

Vamos transformar o Segundo item na Área do conteúdo principal.

Coloque col-11 e ponha um margin left automático com ml-auto e um margin right automático com mr-auto.

/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'>
            <div class="row">
                <div class="col-12">
                    <div class="alert alert-secondary" role="alert">
                          Navbar
                    </div>
                </div>
            </div>
            <div class="row">
                <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-12 col-lg-2 order-1">
                    <div class="alert alert-primary" role="alert"'>
                        Conteúdo superior
                    </div>
                </div>
                <div class="col-11 ml-auto mr-auto order-6">
                    <div class="alert alert-primary" role="alert" style='min-height: 800px;'>
                        Área do conteúdo principal
                    </div>
                </div>
                <div class="col-12 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>

Acesse e teste:

http://127.0.0.1:8000/bootstrap/

Vamos agora copiar duas rows e colar dentro da Área do conteúdo principal.

Na primeira coluna a gente vai colocar col-auto e na segunda col-6.

O col-auto se ajusta ao tamanho do texto, mude o texto: A simple primary alert—check it out!

Para um texto menor qualquer e veja o resultado, perceba que ele se ajusta ao novo texto.

/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'>
            <div class="row">
                <div class="col-12">
                    <div class="alert alert-secondary" role="alert">
                          Navbar
                    </div>
                </div>
            </div>
            <div class="row">
                <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-12 col-lg-2 order-1">
                    <div class="alert alert-primary" role="alert"'>
                        Conteúdo superior
                    </div>
                </div>
                <div class="col-10 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-12 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, por hora ficamos por aqui!

Aula 28                 Aula 30

Todas as aulas desse curso

Voltar para página principal do blog

Para baixar o código como está até agora, acesse o link abaixo:

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

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. 😉

 

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>