Forms
Examples of form control styles.
<form>
<div class="mb-4">
<label for="email" class="form-label text-uppercase">Email</label>
<input type="email" class="form-control" id="email" placeholder="name@example.com">
</div>
<div class="mb-4">
<label for="password" class="form-label text-uppercase">Password</label>
<input type="password" class="form-control" id="password">
</div>
<button type="submit" class="btn btn-primary rounded-pill">Submit</button>
</form>Sizing
Set heights using classes like
.form-control-lg
and
.form-control-sm.
<input class="form-control form-control-lg mb-3" type="text" placeholder=".form-control-lg">
<input class="form-control mb-3" type="text" placeholder="Default input">
<input class="form-control form-control-sm mb-4" type="text" placeholder=".form-control-sm">Floating labels
Create simple form labels that float over your input fields.
Note that in this case, the
input
must come first.
<form>
<div class="form-floating mb-4">
<input type="email" class="form-control" id="email" placeholder="name@example.com">
<label for="email" class="form-label text-uppercase">Email</label>
</div>
<div class="form-floating mb-4">
<input type="password" class="form-control" id="password" placeholder="Password">
<label for="password" class="form-label text-uppercase">Password</label>
</div>
<button type="submit" class="btn btn-primary rounded-pill">Submit</button>
</form>