Skip to main content

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-1" class="form-label text-uppercase">Password</label>
<input type="password" class="form-control" id="password-1">
</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>

Bootstrap Documentation