Skip to main content

Forms

Examples of form control styles.

<form>
<div class="row g-2">
<div class="col-auto">
<label for="name" class="visually-hidden">First name</label>
<input type="text" class="form-control border-0 fst-italic" id="name" placeholder="First name">
</div>
<div class="col-auto">
<label for="email" class="visually-hidden">Email</label>
<input type="email" class="form-control border-0 fst-italic" id="email" placeholder="Email address">
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Sign Up</button>
</div>
</div>
</form>

Sizing

Set heights using classes like .form-control-lg and .form-control-sm.

<input class="form-control form-control-lg border-0" type="text" placeholder=".form-control-lg">
<input class="form-control border-0" type="text" placeholder="Default input">
<input class="form-control form-control-sm border-0" type="text" placeholder=".form-control-sm">

Bootstrap Documentation