Form Layout | Adminia - ASP.NET CORE 3.1, Bootstrap 4 Multipurpose Admin Template

4 Different Form layout

Form layout 1 horizontal style with label align to right

First name

Last Name

Location

Job Profile

Department

Show Code


<div class="row">
<div class="col-lg-6">
	<form>
		<div class="form-group row mb-4">
			<label for="horizontal-firstname-input" class="col-sm-3 col-form-label text-sm-right">First name</label>
			<div class="col-sm-9">
				<input type="text" class="form-control" id="horizontal-firstname-input">
			</div>
		</div>
		<div class="form-group row mb-4">
			<label for="horizontal-Last-Name" class="col-sm-3 col-form-label text-sm-right">Last Name</label>
			<div class="col-sm-9">
				<input type="text" class="form-control" id="horizontal-Last-Name">
			</div>
		</div>

		<div class="form-group row mb-4">
			<label for="horizontal-Location" class="col-sm-3 col-form-label text-sm-right">Location</label>
			<div class="col-sm-9">
				<input type="text" class="form-control" id="horizontal-Location">
			</div>
		</div>
		<div class="form-group row mb-4">
			<label for="horizontal-job" class="col-sm-3 col-form-label text-sm-right">Job Profile</label>
			<div class="col-sm-9">
				<input type="text" class="form-control" id="horizontal-job">
			</div>
		</div>
		<div class="form-group row mb-4">
			<label for="horizontal-Department" class="col-sm-3 col-form-label text-sm-right">Department</label>
			<div class="col-sm-9">
				<input type="text" class="form-control" id="horizontal-Department">
			</div>
		</div>

		<div class="form-group row justify-content-end">
			<div class="col-sm-9">
				<div>
					<button type="submit" class="btn btn-primary ">Submit</button>
					<button type="submit" class="btn btn-dark ">Cancel</button>
				</div>
			</div>
		</div>
	</form>
</div>
</div>

Form layout 2 horizontal style with label align to left

First name

Last Name

Location

Job Profile

Department

Show Code


<div class="row">
<div class="col-lg-6">
	<form>
		<div class="form-group row mb-4">
			<label for="horizontal-firstname-input1" class="col-sm-3 col-form-label">First name</label>
			<div class="col-sm-9">
				<input type="text" class="form-control" id="horizontal-firstname-input1">
			</div>
		</div>
		<div class="form-group row mb-4">
			<label for="horizontal-Last-Name2" class="col-sm-3 col-form-label">Last Name</label>
			<div class="col-sm-9">
				<input type="text" class="form-control" id="horizontal-Last-Name2">
			</div>
		</div>

		<div class="form-group row mb-4">
			<label for="horizontal-Location2" class="col-sm-3 col-form-label">Location</label>
			<div class="col-sm-9">
				<input type="text" class="form-control" id="horizontal-Location2">
			</div>
		</div>
		<div class="form-group row mb-4">
			<label for="horizontal-job2x22; class="col-sm-3 col-form-label">Job Profile</label>
			<div class="col-sm-9">
				<input type="text" class="form-control" id="horizontal-job2">
			</div>
		</div>
		<div class="form-group row mb-4">
			<label for="horizontal-Department2" class="col-sm-3 col-form-label">Department</label>
			<div class="col-sm-9">
				<input type="text" class="form-control" id="horizontal-Department2">
			</div>
		</div>

		<div class="form-group row justify-content-end">
			<div class="col-sm-9">
				<div>
					<button type="submit" class="btn btn-primary ">Submit</button>
					<button type="submit" class="btn btn-dark ">Cancel</button>
				</div>
			</div>
		</div>
	</form>
</div>
</div>

Form layout 3 horizontal style with controls at center position

First name

Last Name

Location

Job Profile

Department

Show Code


<div class="row">
<div class="col-lg-12">
	<form>
		<div class="form-group row mb-4">
			<label for="horizontal-firstname-input2" class="col-sm-3 col-form-label text-sm-right  offset-sm-1">First name</label>
			<div class="col-sm-4">
				<input type="text" class="form-control" id="horizontal-firstname-input2">
			</div>
		</div>
		<div class="form-group row mb-4">
			<label for="horizontal-Last-Name3" class="col-sm-3 col-form-label text-sm-right offset-sm-1">Last Name</label>
			<div class="col-sm-4">
				<input type="text" class="form-control" id="horizontal-Last-Name3">
			</div>
		</div>

		<div class="form-group row mb-4">
			<label for="horizontal-Location3" class="col-sm-3 col-form-label text-sm-right offset-sm-1">Location</label>
			<div class="col-sm-4">
				<input type="text" class="form-control" id="horizontal-Location3">
			</div>
		</div>
		<div class="form-group row mb-4">
			<label for="horizontal-job" class="col-sm-3 col-form-label text-sm-right offset-sm-1">Job Profile</label>
			<div class="col-sm-4">
				<input type="text" class="form-control" id="horizontal-job">
			</div>
		</div>
		<div class="form-group row mb-4">
			<label for="horizontal-Department3" class="col-sm-3 col-form-label text-sm-right offset-sm-1">Department</label>
			<div class="col-sm-4">
				<input type="text" class="form-control" id="horizontal-Department3">
			</div>
		</div>

		<div class="form-group row offset-sm-4">
			<div class="col-sm-4">
				<div>
					<button type="submit" class="btn btn-primary ">Submit</button>
					<button type="submit" class="btn btn-dark ">Cancel</button>
				</div>
			</div>
		</div>
	</form>
</div>
</div>

Form Layout 4 horizontal with full page control style

First Name

Last Name

Telephone

Password

Number

Date and time

Select

Custom Select

Large

Small

Location

URL

Date

Month

Week

Time

Success! You've done it.

Example help text that remains unchanged.

Sorry, that username's taken. Try another?

Example help text that remains unchanged.

Technology

Asp.net Core

JavaScript

jQuery

Show Code


<div class="row">
<div class="col-lg-6">
	<div class="form-group row">
		<label for="example-text-fname" class="col-sm-2 col-form-label text-sm-right">First Name</label>
		<div class="col-sm-10">
			<input class="form-control" type="text" value="Artisanal kale" id="example-text-fname">
		</div>
	</div>
	<div class="form-group row">
		<label for="example-text-input" class="col-sm-2 col-form-label text-sm-right">Last Name</label>
		<div class="col-sm-10">
			<input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
		</div>
	</div>
	<div class="form-group row">
		<label for="example-email-input" class="col-sm-2 col-form-label text-sm-right">Email</label>
		<div class="col-sm-10">
			<input class="form-control" type="email" value="bootstrap@example.com" id="example-email-input">
		</div>
	</div>
	<div class="form-group row">
		<label for="example-tel-input" class="col-sm-2 col-form-label text-sm-right">Telephone</label>
		<div class="col-sm-10">
			<input class="form-control" type="tel" value="1-(444)-444-4444" id="example-tel-input">
		</div>
	</div>
	<div class="form-group row">
		<label for="example-password-input" class="col-sm-2 col-form-label text-sm-right">Password</label>
		<div class="col-sm-10">
			<input class="form-control" type="password" value="hunter2" id="example-password-input">
		</div>
	</div>
	<div class="form-group row">
		<label for="example-number-input" class="col-sm-2 col-form-label text-sm-right">Number</label>
		<div class="col-sm-10">
			<input class="form-control" type="number" value="42" id="example-number-input">
		</div>
	</div>
	<div class="form-group row">
		<label for="example-datetime-local-input" class="col-sm-2 col-form-label text-sm-right">Date and time</label>
		<div class="col-sm-10">
			<input class="form-control" type="datetime-local" value="2011-08-19T13:45:00" id="example-datetime-local-input">
		</div>
	</div>

	<div class="form-group row">
		<label class="col-sm-2 col-form-label text-sm-right">Select</label>
		<div class="col-sm-10">
			<select class="form-control custom-select">
				<option>Select</option>
				<option>Large select</option>
				<option>Small select</option>
			</select>
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2 col-form-label text-sm-right">Custom Select</label>
		<div class="col-sm-10">
			<select class="custom-select">
				<option selected="">Open this select menu</option>
				<option value="1">One</option>
				<option value="2">Two</option>
				<option value="3">Three</option>
			</select>
		</div>
	</div>
	<div class="form-group row">
		<label for="example-text-input-lg" class="col-sm-2 col-form-label text-sm-right">Large</label>
		<div class="col-sm-10">
			<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" id="example-text-input-lg">
		</div>
	</div>
	<div class="form-group row">
		<label for="example-text-input-sm" class="col-sm-2 col-form-label text-sm-right">Small</label>
		<div class="col-sm-10">
			<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" id="example-text-input-sm">
		</div>
	</div>
</div>


<div class="col-lg-6">
	<div class="form-group row">
		<label for="example-search-input" class="col-sm-2 col-form-label text-sm-right">Search</label>
		<div class="col-sm-10">
			<input class="form-control" type="search" value="How do I use this theme" id="example-search-input">
		</div>
	</div>
	<div class="form-group row">
		<label for="example-location2-input" class="col-sm-2 col-form-label text-sm-right">Location</label>
		<div class="col-sm-10">
			<input class="form-control" type="text" id="example-location2-input">
		</div>
	</div>
	<div class="form-group row">
		<label for="example-url-input" class="col-sm-2 col-form-label text-sm-right">URL</label>
		<div class="col-sm-10">
			<input class="form-control" type="url" value="https://codepedia.info" id="example-url-input">
		</div>
	</div>
	<div class="form-group row">
		<label for="example-date-input" class="col-sm-2 col-form-label text-sm-right">Date</label>
		<div class="col-sm-10">
			<input class="form-control" type="date" value="2021-06-14" id="example-date-input">
		</div>
	</div>
	<div class="form-group row">
		<label for="example-month-input" class="col-sm-2 col-form-label text-sm-right">Month</label>
		<div class="col-sm-10">
			<input class="form-control" type="month" value="2021-07" id="example-month-input">
		</div>
	</div>
	<div class="form-group row">
		<label for="example-week-input" class="col-sm-2 col-form-label text-sm-right">Week</label>
		<div class="col-sm-10">
			<input class="form-control" type="week" value="2021-W33" id="example-week-input">
		</div>
	</div>
	<div class="form-group row">
		<label for="example-time-input" class="col-sm-2 col-form-label text-sm-right">Time</label>
		<div class="col-sm-10">
			<input class="form-control" type="time" value="13:45:00" id="example-time-input">
		</div>
	</div>
	<div class="form-group row has-success">
		<label for="inputHorizontalSuccess" class="col-sm-2 col-form-label text-sm-right">Email</label>
		<div class="col-sm-10">
			<input type="email" class="form-control is-valid" id="inputHorizontalSuccess" placeholder="name@example.com">
			<div class="valid-feedback">Success! You've done it.</div>
			<small class="form-text text-muted">Example help text that remains unchanged.</small>
		</div>
	</div>

	<div class="form-group row has-error">
		<label for="inputHorizontalDnger" class="col-sm-2 col-form-label text-sm-right">Email</label>
		<div class="col-sm-10">
			<input type="email" class="form-control is-invalid" id="inputHorizontalDnger" placeholder="name@example.com">
			<div class="invalid-feedback">Sorry, that username's taken. Try another?</div>
			<small class="form-text text-muted">Example help text that remains unchanged.</small>
		</div>
	</div>

	<div class="form-group row has-success">
		<label for="inputHorizontalSuccess" class="col-sm-2 col-form-label text-sm-right">Technology</label>
		<div class="col-sm-10 mt-2">
			<div class="checkbox checkbox-primary form-check-inline">
				<input type="checkbox" id="inlineCheckbox1" value="option1">
				<label for="inlineCheckbox1"> Asp.net Core </label>
			</div>
			<div class="checkbox checkbox-success form-check-inline">
				<input type="checkbox" id="inlineCheckbox2" value="option1" checked="">
				<label for="inlineCheckbox2"> JavaScript </label>
			</div>
			<div class="checkbox checkbox-danger form-check-inline">
				<input type="checkbox" id="inlineCheckbox3" value="option1">
				<label for="inlineCheckbox3"> jQuery </label>
			</div>
		</div>
	</div>
</div>

<div class="col-lg-12">
	<div class="text-center">
		<button type="button" class="btn btn-primary">Centered button</button>
		<button type="button" class="btn btn-dark">Centered button</button>
	</div>
</div>
</div>