Basic form Bootstrap 5

Loading…

1<!DOCTYPE html> 2<html lang="pt-br" dir="ltr"> 3 4<head> 5 <meta charset="utf-8"> 6 <title></title> 7 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 8 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"> 9 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> 10</head> 11 12<body> 13  14 <div class="container mt-3 pt-3"> 15 <div class="col-12"> 16 <h1 class="text-center fw-bolder">Form bootstrap 5</h1> 17 </div> 18 <div class="col-12"> 19 <div class="bg-secondary opacity-75 bg-gradient p-3 text-center mb-2 text-white fw-bolder fs-3"> 20 Cadastre-se 21 </div> 22 <hr> 23 </div> 24 <form class="row g-3"> 25 <div class="col-12"> 26 <label for="inputName" class="form-label">Name</label> 27 <input type="text" class="form-control" id="inputName" placeholder="Name"> 28 </div> 29 30 <div class="col-md-6"> 31 <label for="inputEmail4" class="form-label">Email</label> 32 <input type="email" class="form-control" id="inputEmail4" placeholder="Informe seu e-mail"> 33 </div> 34 <div class="col-md-6"> 35 <label for="inputPassword4" class="form-label">Password</label> 36 <input type="password" class="form-control" id="inputPassword4" placeholder="Informe uma senha segura"> 37 </div> 38 <div class="col-12"> 39 <label for="inputAddress" class="form-label">Address</label> 40 <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"> 41 </div> 42 <div class="col-md-6"> 43 <label for="inputCity" class="form-label">City</label> 44 <input type="text" class="form-control" id="inputCity"> 45 </div> 46 <div class="col-md-4"> 47 <label for="inputState" class="form-label">State</label> 48 <select id="inputState" class="form-select"> 49 <option selected>Choose...</option> 50 <option>...</option> 51 </select> 52 </div> 53 <div class="col-md-2"> 54 <label for="inputZip" class="form-label">CEP</label> 55 <input type="text" class="form-control" id="inputZip"> 56 </div> 57 <div class="col-12"> 58 <div class="form-check"> 59 <input class="form-check-input" type="checkbox" id="gridCheck"> 60 <label class="form-check-label" for="gridCheck"> 61 Concordo com os termos. 62 </label> 63 </div> 64 </div> 65 <div class="col-12 text-end"> 66 <button type="submit" class="btn btn-success w-100 bg-gradient p-3 text-center mb-2 text-white fw-bolder fs-3">Salvar</button> 67<a href="#" class="text-primary shadow-sm">Precisa de ajuda? Clique aqui</a> 68 </div> 69 </form> 70 </div> 71 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> 72</body> 73 74</html> 75

Basic form Bootstrap 5

Source Code

More Forms snippets

Comments(0)