General Forms
Basic From ( Add class bg-success for colored header )
Show Code
<div class="card">
<div class="card-header bg-primary">
<h4 class="text-white pt-2">Basic From <small> ( Add class bg-success for colored header )
</small></h4>
</div> <!-- end card-header -->
<div class="card-body">
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label>Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label>Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<div class="form-group">
<label>Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label>Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label>State</label>
<select class="form-control custom-select">
<option>Alabama</option>
<option>Arizona</option>
<option selected=""> Florida</option>
<option>Louisiana</option>
<option>Michigan</option>
<option>New York</option>
</select>
</div>
<div class="form-group col-md-2">
<label>Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label">
Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
</div> <!-- end card-body -->
</div>
Horizontal From ( Add class bg-dark for colored header )
Show Code
<div class="card">
<div class="card-header bg-dark">
<h4 class="pt-2 text-white"> Horizontal From <small>( Add class bg-dark for colored header )
</small></h4>
</div> <!-- end card-header -->
<div class="card-body">
<form>
<div class="form-group row mb-4">
<label for="horizontal-firstname-input"
class="col-sm-3 col-form-label">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-email-input"
class="col-sm-3 col-form-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="horizontal-email-input">
</div>
</div>
<div class="form-group row mb-4">
<label for="horizontal-password-input"
class="col-sm-3 col-form-label">Password</label>
<div class="col-sm-9">
<input type="password" class="form-control">
</div>
</div>
<div class="form-group row mb-4">
<label for="horizontal-password-input"
class="col-sm-3 col-form-label">Confirm Password</label>
<div class="col-sm-9">
<input type="password" class="form-control">
</div>
</div>
<div class="form-group row mb-4">
<label for="horizontal-password-input" class="col-sm-3 col-form-label">
User
Role
</label>
<div class="col-sm-9">
<select class="form-control custom-select">
<option>Admin</option>
<option>Account</option>
<option>Staff</option>
</select>
</div>
</div>
<div class="form-group row mb-4">
<label class="col-sm-3 col-form-label">Membership</label>
<div class="col-md-9">
<div class="radio-list">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio11" name="customRadio"
class="custom-control-input">
<label class="custom-control-label"
for="customRadio11">Free</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio22" name="customRadio"
class="custom-control-input">
<label class="custom-control-label"
for="customRadio22">Paid</label>
</div>
</div>
</div>
</div>
<div class="form-group row justify-content-end">
<div class="col-sm-9">
<div>
<button type="submit" class="btn btn-primary mr-2">Submit</button>
<button type="submit" class="btn btn-dark">Cancel</button>
</div>
</div>
</div>
</form>
</div> <!-- card-body -->
</div>
Input States ( use is-valid, is-invalid for colored input )
Show Code
<form class="form-horizontal row">
<div class="col-12">
<div class="form-group">
<label class="form-control-label" for="inputSuccess1">
Input with
success
</label>
<input type="text" class="form-control is-valid" id="inputSuccess1">
<div class="valid-feedback">
Success! You've done great job.
</div>
</div>
<div class="form-group">
<label class="form-control-label" for="inputDanger1">
Input with
danger
</label>
<input type="text" class="form-control is-invalid" id="inputDanger1">
<div class="invalid-feedback">
Sorry, that username is already exist. Try another?
</div>
</div>
</div>
</form>
<form class="form-horizontal">
<div class="form-group row">
<label for="inputHorizontalSuccess" class="col-sm-2 col-form-label">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 job.</div>
</div>
</div>
<div class="form-group row">
<label for="inputHorizontalDnger" class="col-sm-2 col-form-label">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 is already exist. Try
another?
</div>
</div>
</div>
</form>
Input Sizes ( use .form-control-sm, .form-control-lg for different input sizes )
Show Code
<form class="form-horizontal row">
<div class="col-12">
<div class="form-group">
<label class="col-sm-3 form-control-label" for="example-input-small">Small</label>
<div class="col-sm-6">
<input type="text" id="example-input-small" name="example-input-small" class="form-control form-control-sm" placeholder="form-control-sm">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 form-control-label" for="example-input-normal">Normal</label>
<div class="col-sm-6">
<input type="text" id="example-input-normal" name="example-input-normal" class="form-control" placeholder="Normal">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 form-control-label" for="example-input-large">Large</label>
<div class="col-sm-6">
<input type="text" id="example-input-large" name="example-input-large" class="form-control form-control-lg" placeholder="form-control-lg">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 form-control-label">Grid Sizes</label>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder=".col-4">
</div>
</div>
<div class="form-group">
<div class="col-sm-5 col-sm-offset-3">
<input type="text" class="form-control" placeholder=".col-5">
</div>
</div>
</div>
</form>
Horizontal Form with Icons
Show Code
<form class="form">
<div class="form-group">
<label>User Name</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"><i data-feather="user"></i></span>
</div>
<input type="text" class="form-control" placeholder="Username"
aria-label="Username">
</div>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"><i data-feather="mail"></i></span>
</div>
<input type="text" class="form-control" placeholder="Email"
aria-label="Email">
</div>
</div>
<div class="form-group">
<label>Password</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"><i data-feather="lock"></i></span>
</div>
<input type="text" class="form-control" placeholder="Password"
aria-label="Password">
</div>
</div>
<div class="form-group">
<label>Confirm Password</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"><i data-feather="lock"></i></span>
</div>
<input type="text" class="form-control" placeholder="Confirm Password"
aria-label="Password">
</div>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox mr-sm-2">
<input type="checkbox" class="custom-control-input" value="check">
<label class="custom-control-label">Remember Me</label>
</div>
</div>
<button type="submit" class="btn btn-primary mr-2">Submit</button>
<button type="submit" class="btn btn-dark">Cancel</button>
</form>
Horizontal Form with the right side Icons
Show Code
<form class="form">
<div class="form-group">
<label>User Name</label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Username"
aria-label="Username">
<div class="input-group-append">
<span class="input-group-text"><i data-feather="user"></i></span>
</div>
</div>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Email"
aria-label="Email">
<div class="input-group-append">
<span class="input-group-text"><i data-feather="mail"></i></span>
</div>
</div>
</div>
<div class="form-group">
<label>Password</label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Password"
aria-label="Password">
<div class="input-group-append">
<span class="input-group-text"><i data-feather="lock"></i></span>
</div>
</div>
</div>
<div class="form-group">
<label>Confirm Password</label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Confirm Password"
aria-label="Password">
<div class="input-group-append">
<span class="input-group-text"><i data-feather="lock"></i></span>
</div>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox mr-sm-2">
<input type="checkbox" class="custom-control-input" value="check">
<label class="custom-control-label">Remember Me</label>
</div>
</div>
<button type="submit" class="btn btn-primary mr-2">Submit</button>
<button type="submit" class="btn btn-dark">Cancel</button>
</form>
Custom File Uploads with different languages
Show Code
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label form-control" for="customFile">Choose file</label>
</div>
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" id="customFileLang" lang="es">
<label class="custom-file-label form-control" for="customFileLang">
Seleccionar
Archivo
</label>
</div>
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" id="customFileLangHTML">
<label class="custom-file-label form-control" for="customFileLangHTML"
data-browse="Bestand kiezen">Voeg je document toe</label>
</div>
With Border bottom ( use class .form-bordered )
Show Code
<form action="#" class="form-horizontal form-bordered">
<div class="form-body">
<div class="form-group row">
<label class="control-label text-sm-right col-md-3">First Name</label>
<div class="col-md-9">
<input type="text" placeholder="small" class="form-control">
<small class="form-control-feedback"> This is inline help </small>
</div>
</div>
<div class="form-group row">
<label class="control-label text-sm-right col-md-3">Last Name</label>
<div class="col-md-9">
<input type="text" placeholder="medium" class="form-control">
<small class="form-control-feedback"> This is inline help </small>
</div>
</div>
<div class="form-group row">
<label class="control-label text-sm-right col-md-3">Gender</label>
<div class="col-md-9">
<select class="form-control custom-select">
<option value="">Male</option>
<option value="">Female</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="control-label text-sm-right col-md-3">Date of Birth</label>
<div class="col-md-9">
<input type="date" class="form-control" placeholder="dd/mm/yyyy">
</div>
</div>
<div class="form-group row">
<label class="control-label text-sm-right col-md-3">Category</label>
<div class="col-md-9">
<select class="form-control custom-select">
<option value="Category 1">Category 1</option>
<option value="Category 2">Category 2</option>
<option value="Category 3">Category 5</option>
<option value="Category 4">Category 4</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="control-label text-sm-right col-md-3">Membership</label>
<div class="col-md-9">
<div class="radio-list">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio111" name="customRadio"
class="custom-control-input">
<label class="custom-control-label"
for="customRadio111">Free</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio222" name="customRadio"
class="custom-control-input">
<label class="custom-control-label"
for="customRadio222">Paid</label>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label class="control-label text-sm-right col-md-3">Street</label>
<div class="col-md-9">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label class="control-label text-sm-right col-md-3">City</label>
<div class="col-md-9">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label class="control-label text-sm-right col-md-3">State</label>
<div class="col-md-9">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label class="control-label text-sm-right col-md-3">Post Code</label>
<div class="col-md-9">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group row last">
<label class="control-label text-sm-right col-md-3">Country</label>
<div class="col-md-9">
<select class="form-control">
</select>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="offset-sm-3 col-md-9">
<button type="submit" class="btn btn-primary">
Submit
</button>
<button type="button" class="btn btn-dark">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</form>