Logo

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>
        

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