Default Action Bar

Please enter your full name
We'll never share your email with anyone else
<form class="form">
 <div class="card-body">
  <div class="form-group">
   <label>Full Name:</label>
   <input type="email" class="form-control" placeholder="Enter full name"/>
   <span class="form-text text-muted">Please enter your full name</span>
  </div>
  <div class="form-group">
   <label>Email address:</label>
   <input type="email" class="form-control" placeholder="Enter email"/>
   <span class="form-text text-muted">We'll never share your email with anyone else</span>
  </div>
  <div class="form-group mb-0">
   <label>Communication:</label>
   <div class="checkbox-list">
    <label class="checkbox checkbox-outline">
     <input type="checkbox"/>
     <span></span>
     Email
    </label>
    <label class="checkbox checkbox-outline">
     <input type="checkbox"/>
     <span></span>
     SMS
    </label>
    <label class="checkbox checkbox-outline">
     <input type="checkbox"/>
     <span></span>
     Phone
    </label>
   </div>
  </div>
 </div>
 <div class="card-footer">
  <button type="reset" class="btn btn-primary mr-2">Submit</button>
  <button type="reset" class="btn btn-secondary">Cancel</button>
 </div>
</form>

Right Action Bar

Please enter your full name
We'll never share your email with anyone else
<form class="form">
 <div class="card-body">
  <div class="form-group">
   <label>Full Name:</label>
   <input type="email" class="form-control" placeholder="Enter full name"/>
   <span class="form-text text-muted">Please enter your full name</span>
  </div>
  <div class="form-group">
   <label>Email address:</label>
   <input type="email" class="form-control" placeholder="Enter email"/>
   <span class="form-text text-muted">We'll never share your email with anyone else</span>
  </div>
  <div class="form-group mb-0">
   <label>Communication:</label>
   <div class="checkbox-list">
    <label class="checkbox checkbox-outline">
     <input type="checkbox"/>
     <span></span>
     Email
    </label>
    <label class="checkbox checkbox-outline">
     <input type="checkbox"/>
     <span></span>
     SMS
    </label>
    <label class="checkbox checkbox-outline">
     <input type="checkbox"/>
     <span></span>
     Phone
    </label>
   </div>
  </div>
 </div>
 <div class="card-footer text-right">
  <button type="reset" class="btn btn-primary mr-2">Submit</button>
  <button type="reset" class="btn btn-secondary">Cancel</button>
 </div>
</form>

Multiple Buttons

Please enter your full name
We'll never share your email with anyone else
<form class="form">
 <div class="card-body">
  <div class="form-group">
   <label>Full Name:</label>
   <input type="email" class="form-control" placeholder="Enter full name"/>
   <span class="form-text text-muted">Please enter your full name</span>
  </div>
  <div class="form-group">
   <label>Email address:</label>
   <input type="email" class="form-control" placeholder="Enter email"/>
   <span class="form-text text-muted">We'll never share your email with anyone else</span>
  </div>
  <div class="form-group mb-0">
   <label>Communication:</label>
   <div class="checkbox-list">
    <label class="checkbox checkbox-outline">
     <input type="checkbox"/>
     <span></span>
     Email
    </label>
    <label class="checkbox checkbox-outline">
     <input type="checkbox"/>
     <span></span>
     SMS
    </label>
    <label class="checkbox checkbox-outline">
     <input type="checkbox"/>
     <span></span>
     Phone
    </label>
   </div>
  </div>
 </div>
 <div class="card-footer">
  <div class="row">
   <div class="col text-left">
    <button type="reset" class="btn btn-primary  mr-2">Submit</button>
    <button type="reset" class="btn btn-secondary">Cancel</button>
   </div>
   <div class="col text-right">
    <button type="reset" class="btn btn-danger">Delete</button>
   </div>
  </div>
 </div>
</form>

Action Button & Link

Please enter your full name
We'll never share your email with anyone else
<form class="form">
 <div class="card-body">
  <div class="form-group">
   <label>Full Name:</label>
   <input type="email" class="form-control" placeholder="Enter full name"/>
   <span class="form-text text-muted">Please enter your full name</span>
  </div>
  <div class="form-group">
   <label>Email address:</label>
   <input type="email" class="form-control" placeholder="Enter email"/>
   <span class="form-text text-muted">We'll never share your email with anyone else</span>
  </div>
  <div class="form-group mb-0">
   <label>Communication:</label>
   <div class="checkbox-list">
    <label class="checkbox checkbox-outline">
     <input type="checkbox"/>
     <span></span>
     Email
    </label>
    <label class="checkbox checkbox-outline">
     <input type="checkbox"/>
     <span></span>
     SMS
    </label>
    <label class="checkbox checkbox-outline">
     <input type="checkbox"/>
     <span></span>
     Phone
    </label>
   </div>
  </div>
 </div>
 <div class="card-footer text-right">
  <button type="reset" class="btn btn-primary mr-2">Submit</button>
  <span class="ml-2">or <a href="#" class="font-weight-bold ml-2">Cancel</a></span>
 </div>
</form>

Aside Space

Please enter your full name
We'll never share your email with anyone else
<form class="form">
 <div class="card-body">
  <div class="form-group">
   <label>Full Name:</label>
   <input type="email" class="form-control" placeholder="Enter full name"/>
   <span class="form-text text-muted">Please enter your full name</span>
  </div>
  <div class="form-group">
   <label>Email address:</label>
   <input type="email" class="form-control" placeholder="Enter email"/>
   <span class="form-text text-muted">We'll never share your email with anyone else</span>
  </div>
  <div class="form-group mb-0">
   <label>Communication:</label>
   <div class="checkbox-list">
    <label class="checkbox checkbox-outline">
     <input type="checkbox"/>
     <span></span>
     Email
    </label>
    <label class="checkbox checkbox-outline">
     <input type="checkbox"/>
     <span></span>
     SMS
    </label>
    <label class="checkbox checkbox-outline">
     <input type="checkbox"/>
     <span></span>
     Phone
    </label>
   </div>
  </div>
 </div>
 <div class="card-footer">
  <div class="row">
   <div class="col text-left">
    <button type="reset" class="btn btn-primary mr-2">Submit</button>
    <button type="reset" class="btn btn-secondary">Cancel</button>
   </div>
   <div class="col text-right">
    <button type="reset" class="btn btn-danger">Delete</button>
   </div>
  </div>
 </div>
</form>

Solid Bar

Please enter your full name
We'll never share your email with anyone else
<form class="form">
 <div class="card-body">
  <div class="form-group">
   <label>Full Name:</label>
   <input type="email" class="form-control" placeholder="Enter full name"/>
   <span class="form-text text-muted">Please enter your full name</span>
  </div>
  <div class="form-group">
   <label>Email address:</label>
   <input type="email" class="form-control" placeholder="Enter email"/>
   <span class="form-text text-muted">We'll never share your email with anyone else</span>
  </div>
  <div class="form-group mb-0">
   <label>Communication:</label>
   <div class="checkbox-list">
    <label class="checkbox checkbox-outline">
     <input type="checkbox"/>
     <span></span>
     Email
    </label>
    <label class="checkbox checkbox-outline">
     <input type="checkbox"/>
     <span></span>
     SMS
    </label>
    <label class="checkbox checkbox-outline">
     <input type="checkbox"/>
     <span></span>
     Phone
    </label>
   </div>
  </div>
 </div>
 <div class="card-footer text-right bg-gray-100 border-top-0">
  <button type="reset" class="btn btn-primary">Submit</button>
  <span class="mx-2">or</span>
  <a href="#" class="btn btn-link btn-link-primary">Cancel</a>
 </div>
</form>

Top & Bottom Actions Bars

Please enter your full name
We'll never share your email with anyone else
<form class="form">
 <div class="card-footer bg-gray-100 border-top-0">
  <div class="row align-items-center">
   <div class="col text-left">
    Top Actions:
   </div>
   <div class="col text-right">
    <button type="reset" class="btn btn-primary font-weight-bold mr-2">Submit</button>
    <button type="reset" class="btn btn-light-primary font-weight-bold">Cancel</button>
   </div>
  </div>
 </div>
 <div class="card-body">
  <div class="form-group">
   <label>Full Name:</label>
   <input type="email" class="form-control" placeholder="Enter full name"/>
   <span class="form-text text-muted">Please enter your full name</span>
  </div>
  <div class="form-group">
   <label>Email address:</label>
   <input type="email" class="form-control" placeholder="Enter email"/>
   <span class="form-text text-muted">We'll never share your email with anyone else</span>
  </div>
  <div class="form-group mb-0">
   <label>Communication:</label>
   <div class="checkbox-list">
    <label class="checkbox checkbox-outline">
     <input type="checkbox"/>
     <span></span>
     Email
    </label>
    <label class="checkbox checkbox-outline">
     <input type="checkbox"/>
     <span></span>
     SMS
    </label>
    <label class="checkbox checkbox-outline">
     <input type="checkbox"/>
     <span></span>
     Phone
    </label>
   </div>
  </div>
 </div>
 <div class="card-footer bg-gray-100 border-top-0 text-right">
  <button type="reset" class="btn btn-primary font-weight-bold mr-2">Submit</button>
  <button type="reset" class="btn btn-light-primary font-weight-bold">Cancel</button>
 </div>
</form>

Horizontal Form Layout

Please enter your full name
We'll never share your email with anyone else
<form class="form">
 <div class="card-body">
  <div class="form-group row mt-4">
   <label  class="col-3 col-form-label">Full Name:</label>
   <div class="col-9">
    <input type="email" class="form-control" placeholder="Enter full name"/>
    <span class="form-text text-muted">Please enter your full name</span>
   </div>
  </div>
  <div class="form-group row">
   <label  class="col-3 col-form-label">Email address:</label>
   <div class="col-9">
    <input type="email" class="form-control" placeholder="Enter email"/>
    <span class="form-text text-muted">We'll never share your email with anyone else</span>
   </div>
  </div>
  <div class="form-group row mb-1">
   <label  class="col-3 col-form-label">Communication:</label>
   <div class="col-9">
    <div class="checkbox-inline">
     <label class="checkbox checkbox-outline">
      <input type="checkbox"/>
      <span></span>
      Email
     </label>
     <label class="checkbox checkbox-outline">
      <input type="checkbox"/>
      <span></span>
      SMS
     </label>
     <label class="checkbox checkbox-outline">
      <input type="checkbox"/>
      <span></span>
      Phone
     </label>
    </div>
   </div>
  </div>
 </div>
 <div class="card-footer">
  <div class="row">
   <div class="col-3">

   </div>
   <div class="col-9">
    <button type="reset" class="btn btn-primary mr-2">Submit</button>
    <button type="reset" class="btn btn-secondary">Cancel</button>
   </div>
  </div>
 </div>
</form>

Notifications 24 New

User Profile 12 messages

James Jones
Application Developer
Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Select A Demo