Aula 29 – Loja Online – Django – Tutorial Bootstrap – Breakpoints
Aula 29 – Loja Online – Django – Tutorial Bootstrap – Breakpoints
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-
- col – column
- md – medium
- lg – large
- xl – extra 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.
