Logo

Basic 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">
           <label>Full Name:</label>
           <input type="email" class="form-control form-control-solid" 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 form-control-solid" placeholder="Enter email"/>
           <span class="form-text text-muted">We'll never share your email with anyone else</span>
          </div>
          <div class="form-group">
           <label>Subscription</label>
           <div class="input-group input-group-lg">
            <div class="input-group-prepend"><span class="input-group-text" >$</span></div>
            <input type="text" class="form-control form-control-solid" placeholder="99.9"/>
           </div>
          </div>
          <div class="form-group">
           <label>Communication:</label>
           <div class="checkbox-list">
            <label class="checkbox">
             <input type="checkbox"/>
             <span></span>
             Email
            </label>
            <label class="checkbox">
             <input type="checkbox"/>
             <span></span>
             SMS
            </label>
            <label class="checkbox">
             <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>
        

Section Separator

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="separator separator-dashed my-5"></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="separator separator-dashed my-5"></div>

          <div class="form-group">
           <label>Subscription</label>
           <div class="input-group">
            <div class="input-group-prepend"><span class="input-group-text" >$</span></div>
            <input type="text" class="form-control" placeholder="99.9"/>
           </div>
          </div>

          <div class="separator separator-dashed my-5"></div>

          <div class="form-group">
           <label>Communication:</label>
           <div class="checkbox-list">
            <label class="checkbox">
             <input type="checkbox"/>
             <span></span>
             Email
            </label>
            <label class="checkbox">
             <input type="checkbox"/>
             <span></span>
             SMS
            </label>
            <label class="checkbox">
             <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>
        

Horizontal Form Layout

1. Customer Info:

Please enter your full name
We'll never share your email with anyone else

2. Customer Account:

Please enter your account holder

        <form class="form">
         <div class="card-body">
          <h3 class="font-size-lg text-dark font-weight-bold mb-6">1. Customer Info:</h3>
          <div class="mb-15">
           <div class="form-group row">
            <label class="col-lg-3 col-form-label">Full Name:</label>
            <div class="col-lg-6">
             <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-lg-3 col-form-label">Email address:</label>
            <div class="col-lg-6">
             <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>

          <h3 class="font-size-lg text-dark font-weight-bold mb-6">2. Customer Account:</h3>
          <div class="mb-3">
           <div class="form-group row">
            <label class="col-lg-3 col-form-label">Holder:</label>
            <div class="col-lg-6">
             <input type="email" class="form-control" placeholder="Enter full name"/>
             <span class="form-text text-muted">Please enter your account holder</span>
            </div>
           </div>
           <div class="form-group row">
            <label class="col-lg-3 col-form-label">Contact</label>
            <div class="col-lg-6">
             <div class="input-group">
              <div class="input-group-prepend"><span class="input-group-text"><i class="la la-chain"></i></span></div>
              <input type="text" class="form-control" placeholder="Phone number"/>
             </div>
            </div>
           </div>
           <div class="form-group row align-items-center">
            <label class="col-lg-3 col-form-label">Communication:</label>
            <div class="col-lg-6">
             <div class="checkbox-inline">
              <label class="checkbox">
               <input type="checkbox"/>
               <span></span>
               Email
              </label>
              <label class="checkbox">
               <input type="checkbox"/>
               <span></span>
               SMS
              </label>
              <label class="checkbox">
               <input type="checkbox"/>
               <span></span>
               Phone
              </label>
             </div>
            </div>
           </div>
          </div>

         </div>
         <div class="card-footer">
          <div class="row">
           <div class="col-lg-3"></div>
           <div class="col-lg-6">
            <button type="reset" class="btn btn-success mr-2">Submit</button>
            <button type="reset" class="btn btn-secondary">Cancel</button>
           </div>
          </div>
         </div>
        </form>
        

Form Label Aligment

1. Customer Info:

Please enter your full name
We'll never share your email with anyone else

2. Customer Account:

Please enter your account holder

        <form class="form">
         <div class="card-body">
          <h3 class="font-size-lg text-dark font-weight-bold mb-6">1. Customer Info:</h3>
          <div class="mb-15">
           <div class="form-group row">
            <label class="col-lg-3 col-form-label text-right">Full Name:</label>
            <div class="col-lg-6">
             <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-lg-3 col-form-label text-right">Email address:</label>
            <div class="col-lg-6">
             <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>

          <h3 class="font-size-lg text-dark font-weight-bold mb-6">2. Customer Account:</h3>
          <div class="mb-3">
           <div class="form-group row">
            <label class="col-lg-3 col-form-label text-right">Holder:</label>
            <div class="col-lg-6">
             <input type="email" class="form-control" placeholder="Enter full name"/>
             <span class="form-text text-muted">Please enter your account holder</span>
            </div>
           </div>
           <div class="form-group row">
            <label class="col-lg-3 col-form-label text-right">Contact</label>
            <div class="col-lg-6">
             <div class="input-group">
              <div class="input-group-prepend"><span class="input-group-text"><i class="la la-chain"></i></span></div>
              <input type="text" class="form-control" placeholder="Phone number"/>
             </div>
            </div>
           </div>
           <div class="form-group row align-items-center">
            <label class="col-lg-3 col-form-label  text-right">Communication:</label>
            <div class="col-lg-6">
             <div class="checkbox-inline">
              <label class="checkbox">
               <input type="checkbox"/>
               <span></span>
               Email
              </label>
              <label class="checkbox">
               <input type="checkbox"/>
               <span></span>
               SMS
              </label>
              <label class="checkbox">
               <input type="checkbox"/>
               <span></span>
               Phone
              </label>
             </div>
            </div>
           </div>
          </div>

         </div>
         <div class="card-footer">
          <div class="row">
           <div class="col-lg-3"></div>
           <div class="col-lg-6">
            <button type="reset" class="btn btn-success 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