Pra quem como eu está usando a versão 5 do bootstrap viu que o layout ficou diferente usando o html da aula.
Eu li a documentação do bootstrap 5 e reescrevi mudando o mínimo possível o exemplo do início da aula pra ficar atualizado.
Mudanças:
- O jumbotron não existe mais na versão 5 (a documentação recomenda outra forma de fazer o mesmo efeito)
- O form-group também não existe mais
- Adicionado classe para os labels
{{define "New"}}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Alura Loja</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-light bg-light mb-4">
<div class="container-fluid">
<a href="/" class="navbar-brand">Alura Loja</a>
</div>
</nav>
<div class="container">
<div class="p-5 mb-4 bg-body-secondary rounded-3">
<h1 class="display-5">Novo produto</h1>
<p class="lead">Insira os detalhes</p>
</div>
<form method="POST" action="insert">
<div class="row">
<div class="col-sm-8">
<div class="mb-3">
<label class="form-label" for="nome">Nome:</label>
<input
type="text"
name="nome"
class="form-control"
/>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="mb-3">
<label class="form-label" for="descricao"
>Descrição:</label
>
<input
type="text"
name="descricao"
class="form-control"
/>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<div class="mb-3">
<label class="form-label" for="nome">Preço:</label>
<input
type="number"
name="preco"
class="form-control"
/>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<div class="mb-3">
<label class="form-label" for="quantidade"
>Quantidade:</label
>
<input
type="number"
name="quantidade"
class="form-control"
/>
</div>
</div>
</div>
<button type="submit" value="salvar" class="btn btn-success">
Salvar
</button>
<a href="/" class="btn btn-info">Voltar</a>
</form>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q"
crossorigin="anonymous"
></script>
</body>
</html>
{{end}}
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!