{% extends "layouts/base.html" %}

{% block title %} Forms Layouts {% endblock %} 

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

	<main class="content">
		<div class="container-fluid p-0">

			<h1 class="h3 mb-3">Form Layouts</h1>

			<div class="row">
				<div class="col-12 col-xl-6">
					<div class="card">
						<div class="card-header">
							<h5 class="card-title">Basic form</h5>
							<h6 class="card-subtitle text-muted">Default Bootstrap form layout.</h6>
						</div>
						<div class="card-body">
							<form>
								<div class="mb-3">
									<label class="form-label">Email address</label>
									<input type="email" class="form-control" placeholder="Email">
								</div>
								<div class="mb-3">
									<label class="form-label">Password</label>
									<input type="password" class="form-control" placeholder="Password">
								</div>
								<div class="mb-3">
									<label class="form-label">Textarea</label>
									<textarea class="form-control" placeholder="Textarea" rows="1"></textarea>
								</div>
								<div class="mb-3">
									<label class="form-label w-100">File input</label>
									<input type="file">
									<small class="form-text text-muted">Example block-level help text here.</small>
								</div>
								<div class="mb-3">
									<label class="form-check m-0">
										<input type="checkbox" class="form-check-input">
										<span class="form-check-label">Check me out</span>
									</label>
								</div>
								<button type="submit" class="btn btn-primary">Submit</button>
							</form>
						</div>
					</div>
				</div>
				<div class="col-12 col-xl-6">
					<div class="card">
						<div class="card-header">
							<h5 class="card-title">Horizontal form</h5>
							<h6 class="card-subtitle text-muted">Horizontal Bootstrap layout.</h6>
						</div>
						<div class="card-body">
							<form>
								<div class="mb-3 row">
									<label class="col-form-label col-sm-2 text-sm-right">Email</label>
									<div class="col-sm-10">
										<input type="email" class="form-control" placeholder="Email">
									</div>
								</div>
								<div class="mb-3 row">
									<label class="col-form-label col-sm-2 text-sm-right">Password</label>
									<div class="col-sm-10">
										<input type="password" class="form-control" placeholder="Password">
									</div>
								</div>
								<div class="mb-3 row">
									<label class="col-form-label col-sm-2 text-sm-right">Textarea</label>
									<div class="col-sm-10">
										<textarea class="form-control" placeholder="Textarea" rows="3"></textarea>
									</div>
								</div>
								<fieldset class="mb-3">
									<div class="row">
										<label class="col-form-label col-sm-2 text-sm-right pt-sm-0">Radios</label>
										<div class="col-sm-10">
											<label class="form-check">
												<input name="radio-3" type="radio" class="form-check-input" checked>
												<span class="form-check-label">Default radio</span>
											</label>
											<label class="form-check">
												<input name="radio-3" type="radio" class="form-check-input">
												<span class="form-check-label">Second default radio</span>
											</label>
											<label class="form-check">
												<input name="radio-3" type="radio" class="form-check-input" disabled>
												<span class="form-check-label">Disabled radio</span>
											</label>
										</div>
									</div>
								</fieldset>
								<div class="mb-3 row">
									<label class="col-form-label col-sm-2 text-sm-right pt-sm-0">Checkbox</label>
									<div class="col-sm-10">
										<label class="form-check m-0">
											<input type="checkbox" class="form-check-input">
											<span class="form-check-label">Check me out</span>
										</label>
									</div>
								</div>
								<div class="mb-3 row">
									<div class="col-sm-10 ml-sm-auto">
										<button type="submit" class="btn btn-primary">Submit</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>

				<div class="col-md-12">
					<div class="card">
						<div class="card-header">
							<h5 class="card-title">Form row</h5>
							<h6 class="card-subtitle text-muted">Bootstrap column layout.</h6>
						</div>
						<div class="card-body">
							<form>
								<div class="row">
									<div class="mb-3 col-md-6">
										<label class="form-label" for="inputEmail4">Email</label>
										<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
									</div>
									<div class="mb-3 col-md-6">
										<label class="form-label" for="inputPassword4">Password</label>
										<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
									</div>
								</div>
								<div class="mb-3">
									<label class="form-label" for="inputAddress">Address</label>
									<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
								</div>
								<div class="mb-3">
									<label class="form-label" for="inputAddress2">Address 2</label>
									<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
								</div>
								<div class="row">
									<div class="mb-3 col-md-6">
										<label class="form-label" for="inputCity">City</label>
										<input type="text" class="form-control" id="inputCity">
									</div>
									<div class="mb-3 col-md-4">
										<label class="form-label" for="inputState">State</label>
										<select id="inputState" class="form-control">
											<option selected>Choose...</option>
											<option>...</option>
										</select>
									</div>
									<div class="mb-3 col-md-2">
										<label class="form-label" for="inputZip">Zip</label>
										<input type="text" class="form-control" id="inputZip">
									</div>
								</div>
								<div class="mb-3">
									<label class="form-label" class="form-check m-0">
										<input type="checkbox" class="form-check-input">
										<span class="form-check-label">Check me out</span>
									</label>
								</div>
								<button type="submit" class="btn btn-primary">Submit</button>
							</form>
						</div>
					</div>
				</div>

				<div class="col-md-12">
					<div class="card">
						<div class="card-header">
							<h5 class="card-title">Inline form</h5>
							<h6 class="card-subtitle text-muted">Single horizontal row.</h6>
						</div>
						<div class="card-body">
							<form class="row row-cols-md-auto align-items-center">
								<div class="col-12">
									<label class="sr-only" for="inlineFormInputName2">Name</label>
									<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
								</div>

								<div class="col-12">
									<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
									<div class="input-group mb-2 mr-sm-2">
										<div class="input-group-text">@</div>
										<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
									</div>
								</div>

								<div class="col-12">
									<div class="form-check mb-1 mr-sm-2">
										<input type="checkbox" class="form-check-input" id="customControlInline">
										<label class="form-check-label" for="customControlInline">Remember me</label>
									</div>
								</div>

								<div class="col-12">
									<button type="submit" class="btn btn-primary mb-2">Submit</button>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>

		</div>
	</main>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}{% endblock javascripts %}