Can I use "Custom form Bootstrap 5.1.3" in commercial projects?

Yes. All GoSnippets are MIT licensed for personal and commercial use without attribution.

Does this snippet include Bootstrap?

This example targets Bootstrap 5. Copy the HTML/CSS/JS into your layout after loading Bootstrap CSS and JS from CDN or npm.

Custom form Bootstrap 5.1.3 — Free Forms Snippet (Bootstrap 5)

Loading…

1<!DOCTYPE html> 2<html lang="pt-br" dir="ltr"> 3 4<head> 5 <meta charset="utf-8"> 6 <title>Form bootstrap 5 -no border</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 11 <style d-flex="screen"> 12 .form-control, 13 .form-select { 14 border: 0; 15 } 16 17 .form-control:focus, 18 .form-select:focus { 19 -webkit-box-shadow: none; 20 box-shadow: none; 21 } 22 23 .bg-form { 24 25 background-color: #383434 ; 26 } 27 28 .bg-button-submit { 29 background-color: #282828 ; 30 } 31 </style> 32</head> 33 34<body> 35  36 <div class="container mt-3 pt-3"> 37 <div class="row"> 38 <div class="col-12"> 39 <div class="card p-3 bg-form"> 40 <form class="row g-3"> 41 <div class="col-12"> 42 <h1 class="text-center fw-bolder text-white mt-3">Form bootstrap 5 - Floating labels</h1> 43 <hr> 44 </div> 45 <div class="col-12"> 46 <div class="p-3 mb-3 text-white fw-bolder fs-3 border-5 border-start"> 47 Cadastre-se 48 </div> 49 </div> 50 <div class="col-12"> 51 <div class="form-floating"> 52 <input type="text" autocomplete="off" class="form-control bg-light " id="inputName" placeholder="Name"> 53 <label for="inputName">Name</label> 54 </div> 55 </div> 56 <div class="col-12 col-md-6"> 57 <div class="form-floating"> 58 <input type="email" class="form-control bg-light " id="inputEmail4" placeholder="Informe seu e-mail"> 59 <label for="inputEmail4">Email address</label> 60 </div> 61 </div> 62 <div class="col-md-6"> 63 <div class="form-floating"> 64 <input type="password" class="form-control bg-light border-0 " id="inputPassword4" placeholder="Informe uma senha segura"> 65 <label for="inputPassword4" class="form-label">Password</label> 66 </div> 67 </div> 68 <div class="col-12"> 69 <div class="form-floating"> 70 <input type="text" class="form-control bg-light " id="inputAddress" placeholder="1234 Main St"> 71 <label for="inputAddress" class="form-label">Address</label> 72 </div> 73 </div> 74 <div class="col-md-6"> 75 <div class="form-floating"> 76 <input type="text" class="form-control bg-light " id="inputCity" placeholder="Cidade"> 77 <label for="inputCity" class="form-label">City</label> 78 </div> 79 </div> 80 <div class="col-md-4"> 81 <div class="form-floating"> 82 <select id="inputState" class="form-select bg-light"> 83 <option selected>Choose...</option> 84 <option>...</option> 85 </select> 86 <label for="inputState" class="form-label">State</label> 87 </div> 88 </div> 89 <div class="col-md-2"> 90 <div class="form-floating"> 91 <input type="text" class="form-control bg-light" id="inputZip" placeholder="Cep"> 92 <label for="inputZip" class="form-label">CEP</label> 93 </div> 94 </div> 95 <div class="col-12"> 96 <div class="form-floating"> 97 <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea" style="height:100px"></textarea> 98 <label for="floatingTextarea">Comments</label> 99 </div> 100 </div> 101 <div class="col-12"> 102 <div class="form-check"> 103 <input class="form-check-input" type="checkbox" id="gridCheck"> 104 <label class="form-check-label shadow-sm text-white" for="gridCheck"> 105 Concordo com os termos. 106 </label> 107 </div> 108 </div> 109 <div class="col-12 text-end"> 110 <button type="submit" class="btn bg-button-submit w-100 bg-gradient p-3 text-center mb-2 text-white fw-bolder fs-3">Salvar</button> 111 <a href="#" class="text-primary shadow-sm">Precisa de ajuda? Clique aqui</a> 112 </div> 113 </form> 114 </div> 115 </div> 116 </div> 117 </div> 118 <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> 119</body> 120 121</html>

Custom form Bootstrap 5.1.3

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Forms snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery

Ocean Depth Neumorphic Music Player with Waveform Scrubber

Cyberpunk AI Chat Dashboard with Dynamic Orbital Glow

Aurora Mint Neumorphic Event Scheduler with Drag Selection