Form Layout

Form Grid

Form grid helps you to create forms with multiple columns.

HTML Code for this Element

<form class="row g-3">
	<div class="col-md-6">
		<label for="inputEmail4" class="form-label">Email</label>
		<input type="email" class="form-control" id="inputEmail4">
	</div>
	<div class="col-md-6">
		<label for="inputPassword4" class="form-label">Password</label>
		<input type="password" class="form-control" id="inputPassword4">
	</div>
	<div class="col-12">
		<label for="inputAddress" class="form-label">Address</label>
		<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
	</div>
	<div class="col-md-6">
		<label for="inputCity" class="form-label">City</label>
		<input type="text" class="form-control" id="inputCity">
	</div>
	<div class="col-md-4">
		<label for="inputState" class="form-label">State</label>
		<select id="inputState" class="form-select form-control">
			<option selected>Choose...</option>
			<option>...</option>
		</select>
	</div>
	<div class="col-md-2">
		<label for="inputZip" class="form-label">Zip</label>
		<input type="text" class="form-control" id="inputZip">
	</div>
	<div class="col-12">
		<div class="form-check">
			<input class="form-check-input" type="checkbox" id="gridCheck">
			<label class="form-check-label" for="gridCheck">
			Check me out
			</label>
		</div>
	</div>
	<div class="col-12">
		<button type="submit" class="btn btn-primary px-5 float-end mb-3">Sign in</button>
	</div>
</form>

Horizontal Form

Horizontal labels on forms.

Username

Password

Radios

First radio

Second radio

Example checkbox

Disabled checkbox

HTML Code for this Element

<form>
	<div class="row mb-3">
		<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
		<div class="col-sm-10">
			<input type="email" class="form-control" id="inputEmail3">
		</div>
	</div>
	
	<div class="row mb-3">
		<label for="inputEmail3" class="col-sm-2 col-form-label">Username</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="username">
		</div>
	</div>
	<div class="row mb-3">
		<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
		<div class="col-sm-10">
			<input type="password" class="form-control" id="inputPassword3">
		</div>
	</div>
	<fieldset class="row mb-3">
		<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
		<div class="col-sm-10">
			<div class="form-check">
				<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
				<label class="form-check-label" for="gridRadios1">
					First radio
				</label>
			</div>
			<div class="form-check">
				<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
				<label class="form-check-label" for="gridRadios2">
					Second radio
				</label>
			</div>
		</div>
	</fieldset>
	<div class="row mb-3">
		<div class="col-sm-10 offset-sm-2">
			<div class="form-check">
				<input class="form-check-input" type="checkbox" id="gridCheck1">
				<label class="form-check-label" for="gridCheck1">
					Example checkbox
				</label>
			</div>
		</div>
			<div class="col-sm-10 offset-sm-2">
				<div class="form-check">
					<input class="form-check-input" type="checkbox" id="gridCheck1" disabled>
					<label class="form-check-label" for="gridCheck1">
						Disabled checkbox
					</label>
				</div>
			</div>
	</div>
	<button type="submit" class="btn btn-primary px-5 float-end mb-3">Sign in</button>
</form>

Auto-sizing

You can use flexbox utility classes to format positioning and size of elements

HTML Code for this Element

<form class="row gy-2 gx-3 align-items-center">
	<div class="col-auto">
		<label class="visually-hidden" for="autoSizingInput">Name</label>
		<input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
	</div>
	<div class="col-auto">
		<label class="visually-hidden" for="autoSizingInputGroup">Username</label>
		<div class="input-group">
		<div class="input-group-text">@</div>
		<input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
		</div>
	</div>
	<div class="col-auto">
		<label class="visually-hidden" for="autoSizingSelect">Preference</label>
		<select class="form-select" id="autoSizingSelect">
			<option selected>Choose...</option>
			<option value="1">One</option>
			<option value="2">Two</option>
			<option value="3">Three</option>
		</select>
	</div>
	<div class="col-auto">
		<div class="form-check">
			<input class="form-check-input" type="checkbox" id="autoSizingCheck">
			<label class="form-check-label" for="autoSizingCheck">
				Remember me
			</label>
		</div>
	</div>
	<div class="col-auto">
		<button type="submit" class="btn btn-primary">Submit</button>
	</div>
</form>

Inline Forms

Use .rows-cols-* classes to create responsive horizontal layouts.

HTML Code for this Element

<form class="row row-cols-lg-auto g-3 align-items-center">
	<div class="col-12">
		<label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
		<div class="input-group">
		<div class="input-group-text">@</div>
		<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
		</div>
	</div>
	
	<div class="col-12">
		<label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
		<select class="form-select" id="inlineFormSelectPref">
		<option selected>Choose...</option>
		<option value="1">One</option>
		<option value="2">Two</option>
		<option value="3">Three</option>
		</select>
	</div>
	
	<div class="col-12">
		<div class="form-check">
		<input class="form-check-input" type="checkbox" id="inlineFormCheck">
		<label class="form-check-label" for="inlineFormCheck">
			Remember me
		</label>
		</div>
	</div>
	
	<div class="col-12">
		<button type="submit" class="btn btn-primary">Submit</button>
	</div>
</form>