Stack Forms
<form> <div class="form-group mb-3"> <input type="email" class="form-control" id="sEmail" aria-describedby="emailHelp1" placeholder="Email address"> <small id="emailHelp1" class="form-text text-muted">We'll never share your email with anyone else.</small></div><div class="form-group mb-4"><input type="password" class="form-control" id="sPassword" placeholder="Password"></div><div class="form-group form-check pl-0"><div class="custom-control custom-checkbox checkbox-info"><input type="checkbox" class="custom-control-input" id="sChkbox"><label class="custom-control-label" for="sChkbox">Subscribe to weekly newsletter</label></div></div><button type="submit" class="btn btn-primary mt-3">Submit</button></form>
Horizontal form
<form><div class="form-group row mb-4"><label for="hEmail" class="col-xl-2 col-sm-3 col-sm-2 col-form-label">Email</label><div class="col-xl-10 col-lg-9 col-sm-10"><input type="email" class="form-control" id="hEmail" placeholder=""></div></div><div class="form-group row mb-4"><label for="hPassword" class="col-xl-2 col-sm-3 col-sm-2 col-form-label">Password</label><div class="col-xl-10 col-lg-9 col-sm-10"><input type="password" class="form-control" id="hPassword" placeholder=""></div></div><fieldset class="form-group mb-4"><div class="row"><label class="col-form-label col-xl-2 col-sm-3 col-sm-2 pt-0">Choose Segements</label><div class="col-xl-10 col-lg-9 col-sm-10"><div class="form-check mb-2"><div class="custom-control custom-radio classic-radio-info"><input type="radio" id="hRadio1" name="classicRadio" class="custom-control-input"><label class="custom-control-label" for="hRadio1">Segements 1</label></div></div><div class="form-check mb-2"><div class="custom-control custom-radio classic-radio-info"><input type="radio" id="hRadio2" name="classicRadio" class="custom-control-input"><label class="custom-control-label" for="hRadio2">Segements 2</label></div></div><div class="form-check disabled"><div class="custom-control custom-radio classic-radio-default"><input type="radio" id="hRadio3" name="classicRadio" class="custom-control-input" disabled><label class="custom-control-label" for="hRadio3">Segements 3(disabled)</label></div></div></div></div></fieldset><div class="form-group row"><div class="col-sm-2">Apply</div><div class="col-sm-10"><div class="form-check pl-0"><div class="custom-control custom-checkbox checkbox-info"><input type="checkbox" class="custom-control-input" id="hChkbox"><label class="custom-control-label" for="hChkbox">Terms Conditions</label></div></div></div></div><div class="form-group row"><div class="col-sm-10"><button type="submit" class="btn btn-primary mt-3">Lets Go</button></div></div></form>
Registration Forms
<form><div class="form-group mb-4"><input type="email" class="form-control" id="rEmail" placeholder="Email address *"></div><div class="form-group mb-4"><input type="password" class="form-control" id="rPassword" placeholder="Password *"></div><div class="form-group"><input type="password" class="form-control" id="rConfirmPassword" placeholder="Confirm Password *"></div><small id="emailHelp2" class="form-text text-muted">*Required Fields</small><div class="form-group form-check pl-0 mt-5"><div class="custom-control custom-checkbox checkbox-info"><input type="checkbox" class="custom-control-input" id="rChkbox"><label class="custom-control-label" for="rChkbox">Subscribe to weekly newsletter</label></div></div><button type="submit" class="btn btn-primary mt-3">Submit</button></form>
Login Form
<form><div class="form-group mb-4"><input type="text" class="form-control" id="lFullName" placeholder="Full Name *"></div><div class="form-group mb-4"><input type="email" class="form-control" id="lEmail" placeholder="Email address *"></div><div class="form-group"><input type="password" class="form-control" id="lPassword" placeholder="Password *"></div><small id="emailHelp" class="form-text text-muted">*Required Fields</small><button type="submit" class="btn btn-primary mt-4">Submit</button></form>
Forms Grid
<form><div class="form-row mb-4"><div class="form-group col-md-6"><label for="inputEmail4">Email</label><input type="email" class="form-control" id="inputEmail4" placeholder="Email"></div><div class="form-group col-md-6"><label for="inputPassword4">Password</label><input type="password" class="form-control" id="inputPassword4" placeholder="Password"></div></div><div class="form-group mb-4"><label for="inputAddress">Address</label><input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"></div><div class="form-group mb-4"><label for="inputAddress2">Address 2</label><input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"></div><div class="form-row mb-4"><div class="form-group col-md-6"><label for="inputCity">City</label><input type="text" class="form-control" id="inputCity"></div><div class="form-group col-md-4"><label for="inputState">State</label><select id="inputState" class="form-control"><option selected>Choose...</option><option>...</option></select></div><div class="form-group col-md-2"><label for="inputZip">Zip</label><input type="text" class="form-control" id="inputZip"></div></div><div class="form-group"><div class="form-check pl-0"><div class="custom-control custom-checkbox checkbox-info"><input type="checkbox" class="custom-control-input" id="gridCheck"><label class="custom-control-label" for="gridCheck">Check me out</label></div></div></div><button type="submit" class="btn btn-primary mt-3">Sign in</button></form>
Inline forms
<form class="form-inline justify-content-center"><label class="sr-only" for="inlineFormInputName2">Name</label><input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe"><label class="sr-only" for="inlineFormInputGroupUsername2">Username</label><div class="input-group mb-2 mr-sm-2"><div class="input-group-prepend"><div class="input-group-text">@</div></div><input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username"></div><div class="form-check mb-2 mr-sm-2"><div class="custom-control custom-checkbox checkbox-info"><input type="checkbox" class="custom-control-input" id="inlineFormCheck"><label class="custom-control-label" for="inlineFormCheck">Remember me</label></div></div><button type="submit" class="btn btn-primary mb-2">Submit</button></form>
Auto-sizing
<form><div class="form-row align-items-center justify-content-center"><div class="col-auto"><label class="sr-only" for="inlineFormInput">Name</label><input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe"></div><div class="col-auto"><label class="sr-only" for="inlineFormInputGroup">Username</label><div class="input-group mb-2"><div class="input-group-prepend"><div class="input-group-text">@</div></div><input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username"></div></div><div class="col-auto"><div class="form-check mb-2 pl-0"><div class="custom-control custom-checkbox checkbox-info"><input type="checkbox" class="custom-control-input" id="autoSizingCheck"><label class="custom-control-label" for="autoSizingCheck">Remember me</label></div></div></div><div class="col-auto"><button type="submit" class="btn btn-primary mt-3">Submit</button></div></div></form>
Actions Buttons
<form class="form-vertical" action="#"><div class="form-group mb-4"><label class="control-label">First Name:</label><input type="text" name="first_name" class="form-control" ></div><div class="form-group mb-4"><label class="control-label">Email:</label><div class="input-group"><div class="input-group-prepend"><div class="input-group-text">@</div></div><input type="text" name="email" class="form-control" ></div></div><div class="form-group mb-4"><label class="control-label">Website:</label><input type="text" name="website" value="https://" class="form-control" ></div><div class="form-group mb-4"><label class="control-label">Password:</label><div class="input-group mb-4"><input type="password" name="pass" class="form-control" ><span class="input-group-addon"><i class="icon-user"></i></span></div></div><div class="form-group mb-4"><label class="control-label">Confirm Password:</label><div class="input-group"><input type="password" name="cpass" class="form-control"><span class="input-group-addon"><i class="icon-user"></i></span></div></div><input type="submit" value="Submit" class="btn btn-primary ml-3 mt-3"></form>