Logo

Projects

Bravio Application By James
Quick Reports By Ana
CRM Reporting Tool By Adam
DB Management By CRA Team
Cloud Service By iC Team
Disqus Project By PV Inc.
Plurk Meeting By Plurk Team.

Basic Example

@
Some help content goes here
@example.com
$ 0.00
#
px

       <div class="card card-custom">
        <div class="card-header">
         <h3 class="card-title">
          Basic Example
         </h3>
        </div>
        <!--begin::Form-->
        <form class="form">
         <div class="card-body">
          <div class="form-group">
           <div class="alert alert-custom alert-default" role="alert">
            <div class="alert-icon"><i class="flaticon-warning text-primary"></i></div>
            <div class="alert-text">
             Use any icon in input group from <a  class="font-weight-bold" href="<?php echo Util::getUrl( 'components/icons/flaticon' ) ?>">Flaticon</a>,
             <a  class="font-weight-bold" href="<?php echo Util::getUrl( 'components/icons/fontawesome5' ) ?>">Fontawesome 5</a>,
             <a  class="font-weight-bold" href="<?php echo Util::getUrl( 'components/icons/duo-tone' ) ?>">Duotone</a>,
             <a  class="font-weight-bold" href="<?php echo Util::getUrl( 'components/icons/lineawesome' ) ?>">Lineawesome</a> or
             <a  class="font-weight-bold" href="<?php echo Util::getUrl( 'components/icons/socicons' ) ?>">Socicons</a> icons.
            </div>
           </div>
          </div>
          <div class="form-group">
           <label>Left Addon</label>
           <div class="input-group">
            <div class="input-group-prepend"><span class="input-group-text">@</span></div>
            <input type="text" class="form-control" placeholder="Email" />
           </div>
           <span class="form-text text-muted">Some help content goes here</span>
          </div>
          <div class="form-group">
           <label>Right Addon</label>
           <div class="input-group">
            <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon2"/>
            <div class="input-group-append"><span class="input-group-text">@example.com</span></div>
           </div>
          </div>
          <div class="separator separator-dashed my-8"></div>
          <div class="form-group">
           <label>Joint Addons</label>
           <div class="input-group">
            <div class="input-group-prepend">
             <span class="input-group-text">$</span>
             <span class="input-group-text">0.00</span>
            </div>
            <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"/>
           </div>
          </div>
          <div class="form-group mb-2">
           <label>Left & Right Addons</label>
           <div class="input-group">
            <div class="input-group-prepend"><span class="input-group-text">#</span></div>
            <input type="text" class="form-control" placeholder="Units" />
            <div class="input-group-append"><span class="input-group-text">px</span></div>
           </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>
        <!--end::Form-->
       </div>
      

With Icons

Some help content goes here
$

       <div class="card card-custom">
        <div class="card-header">
         <h3 class="card-title">
          With Icons
         </h3>
        </div>
        <!--begin::Form-->
        <form class="form">
         <div class="card-body">
          <div class="form-group">
           <div class="alert alert-custom alert-default" role="alert">
            <div class="alert-icon"><?php echo Page::getSVG(Page::getMediaPath() . "svg/icons/Tools/Compass.svg", "svg-icon-primary svg-icon-xl");?></div>
            <div class="alert-text">
             Easily extend form controls by adding text, buttons, icons, or button groups on either side of the input.
            </div>
           </div>
          </div>
          <div class="form-group">
           <label>Left Addon</label>
           <div class="input-group">
            <div class="input-group-prepend"><span class="input-group-text"><i class="la la-exclamation-triangle icon-lg"></i></span></div>
            <input type="text" class="form-control" placeholder="Email" />
           </div>
           <span class="form-text text-muted">Some help content goes here</span>
          </div>
          <div class="form-group">
           <label>Right Addon</label>
           <div class="input-group">
            <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"/>
            <div class="input-group-append"><span class="input-group-text"><i class="la la-group icon-lg"></i></span></div>
           </div>
          </div>

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

          <div class="form-group">
           <label>Joint Addons</label>
           <div class="input-group">
            <div class="input-group-prepend">
             <span class="input-group-text">$</span>
            </div>
            <input type="text" class="form-control" placeholder="0.00" aria-label="Amount (to the nearest dollar)"/>
            <div class="input-group-append">
             <span class="input-group-text"><i class="la la-registered"></i></span>
            </div>
           </div>
          </div>
          <div class="form-group">
           <label>Both Addons</label>
           <div class="input-group">
            <div class="input-group-prepend"><span class="input-group-text"><i class="flaticon-refresh"></i></span></div>
            <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"/>
            <div class="input-group-append"><span class="input-group-text"><i class="flaticon-user"></i></span></div>
           </div>
          </div>
          <div class="form-group">
           <label>Duotone Icons</label>
           <div class="input-group">
            <div class="input-group-prepend">
             <span class="input-group-text line-height-0 py-0">
              <?php echo Page::getSVG(Page::getMediaPath() . "svg/icons/General/Search.svg");?>
             </span>
            </div>
            <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"/>
            <div class="input-group-append">
             <span class="input-group-text line-height-0 py-0">
              <?php echo Page::getSVG(Page::getMediaPath() . "svg/icons/Code/Compiling.svg");?>
             </span>
            </div>
           </div>
          </div>
          <div class="form-group mb-2">
           <label>Keenthemes Icons</label>
           <div class="input-group">
            <div class="input-group-prepend">
             <span class="input-group-text line-height-0 py-0">
              <i class="ki ki-arrow-back icon-sm"></i>
             </span>
            </div>
            <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"/>
            <div class="input-group-append">
             <span class="input-group-text line-height-0 py-0">
              <i class="ki ki-arrow-next icon-sm"></i>
             </span>
            </div>
           </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>
        <!--end::Form-->
       </div>
      

Sizing

Some help content goes here
0.00

       <div class="card card-custom">
        <div class="card-header">
         <h3 class="card-title">
          Sizing
         </h3>
        </div>
        <!--begin::Form-->
        <form class="form">
         <div class="card-body">
          <div class="form-group">
           <div class="alert alert-custom alert-default" role="alert">
            <div class="alert-icon"><i class="flaticon-warning text-primary"></i></div>
            <div class="alert-text">
             Add the relative form sizing classes to the <code>.input-group</code> itself and contents within
             will automatically resize.
            </div>
           </div>
          </div>
          <div class="form-group">
           <label>Large Input Group</label>
           <div class="input-group input-group-lg">
            <div class="input-group-prepend"><span class="input-group-text"><i class="la la-exclamation-triangle "></i></span></div>
            <input type="text" class="form-control" placeholder="Large size" />
           </div>
           <span class="form-text text-muted">Some help content goes here</span>
          </div>
          <div class="form-group">
           <label>Large Input Group</label>
           <div class="input-group input-group-lg">
            <div class="input-group-prepend">
             <span class="input-group-text"><i class="flaticon-refresh"></i></span>
             <span class="input-group-text">0.00</span>
            </div>
            <input type="text" class="form-control" aria-label="Large size"/>
           </div>
          </div>
          <div class="form-group">
           <label>Small Input Group</label>
           <div class="input-group input-group-sm">
            <input type="text" class="form-control" placeholder="Small size" aria-describedby="basic-addon2"/>
            <div class="input-group-append"><span class="input-group-text"><i class="la la-group"></i></span></div>
           </div>
          </div>
          <div class="form-group">
           <label>Small Input Group</label>
           <div class="input-group input-group-sm">
            <div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-paper-plane" aria-hidden="true"></i></span></div>
            <input type="text" class="form-control" placeholder="Small size" aria-describedby="basic-addon2"/>
           </div>
          </div>
          <div class="form-group mb-2">
           <label>Small Input Group</label>
           <div class="input-group input-group-sm">
            <div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-paper-plane" aria-hidden="true"></i></span></div>
            <input type="text" class="form-control" placeholder="Small size" aria-describedby="basic-addon2"/>
            <div class="input-group-append"><span class="input-group-text"><i class="la la-group"></i></span></div>
           </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>
        <!--end::Form-->
       </div>
      

Input Icons

Some help content goes here
Some help content goes here

       <div class="card card-custom">
        <div class="card-header">
         <h3 class="card-title">
          Input Icons
         </h3>
        </div>
        <!--begin::Form-->
        <form class="form">
         <div class="card-body">
          <div class="form-group">
           <div class="alert alert-custom alert-default" role="alert">
            <div class="alert-icon"><i class="flaticon-warning text-primary"></i></div>
            <div class="alert-text">Use custom icon input component to place icon inside input control.</div>
           </div>
          </div>
          <div class="form-group">
           <label>Left Icon Input</label>
           <div class="input-icon">
            <input type="text" class="form-control" placeholder="Search..."/>
            <span><i class="flaticon2-search-1 icon-md"></i></span>
           </div>
           <span class="form-text text-muted">Some help content goes here</span>
          </div>
          <div class="form-group">
           <label>Right Icon Input</label>
           <div class="input-icon input-icon-right">
            <input type="text" class="form-control" placeholder="Search..."/>
            <span><i class="flaticon2-search-1 icon-md"></i></span>
           </div>
           <span class="form-text text-muted">Some help content goes here</span>
          </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>
        <!--end::Form-->
       </div>
      

Checkboxes and Radio addons

$
$
$
$

       <div class="card card-custom">
        <div class="card-header">
         <h3 class="card-title">
          Checkboxes and Radio addons
         </h3>
        </div>
        <!--begin::Form-->
        <form class="form">
         <div class="card-body">
          <div class="form-group">
           <div class="alert alert-custom alert-default" role="alert">
            <div class="alert-icon"><i class="flaticon-warning text-primary"></i></div>
            <div class="alert-text">
             Place any checkbox or radio option within an input group’s addon instead of text.
            </div>
           </div>
          </div>
          <div class="form-group">
           <label>Left Checkbox Addon</label>
           <div class="input-group">
            <div class="input-group-prepend">
             <span class="input-group-text">
              <label class="checkbox checkbox-inline checkbox-success">
               <input type="checkbox" checked=""/>
               <span></span>
              </label>
             </span>
             <span class="input-group-text">$</span>
            </div>
            <input type="text" class="form-control" aria-label="Text input with checkbox"/>
           </div>
          </div>
          <div class="form-group">
           <label>Right Checkbox Addon</label>
           <div class="input-group">
            <div class="input-group-prepend">
             <span class="input-group-text">$</span>
            </div>
            <input type="text" class="form-control" aria-label="Text input with checkbox"/>
            <div class="input-group-append">
             <span class="input-group-text">
              <label class="checkbox checkbox-inline checkbox-primary">
               <input type="checkbox" checked=""/>
               <span></span>
              </label>
             </span>
            </div>
           </div>
          </div>
          <div class="form-group">
           <label>Right & Left Checkbox Addon</label>
           <div class="input-group">
            <div class="input-group-prepend">
             <span class="input-group-text">
              <label class="checkbox checkbox-inline">
               <input type="checkbox" checked="checked"/>
               <span></span>
              </label>
             </span>
            </div>
            <input type="text" class="form-control" aria-label="Text input with checkbox"/>
            <div class="input-group-append">
             <span class="input-group-text">
              <label class="checkbox checkbox-inline">
               <input type="checkbox"/>
               <span></span>
              </label>
             </span>
            </div>
           </div>
          </div>
          <div class="form-group">
           <label>Left Radio Addon</label>
           <div class="input-group">
            <div class="input-group-prepend">
             <span class="input-group-text">
              <label class="radio radio-single radio-success">
               <input type="radio" checked=""/>
               <span></span>
              </label>
             </span>
             <span class="input-group-text">$</span>
            </div>
            <input type="text" class="form-control" aria-label="Text input with radio"/>
           </div>
          </div>
          <div class="form-group">
           <label>Right Radio Addon</label>
           <div class="input-group">
            <div class="input-group-prepend">
             <span class="input-group-text">$</span>
            </div>
            <input type="text" class="form-control" aria-label="Text input with radio"/>
            <div class="input-group-append">
             <span class="input-group-text">
              <label class="radio radio-single radio-primary">
               <input type="radio" checked=""/>
               <span></span>
              </label>
             </span>
            </div>
           </div>
          </div>
          <div class="form-group mb-2">
           <label>Right & Left Radio Addon</label>
           <div class="input-group">
            <div class="input-group-prepend">
             <span class="input-group-text">
              <label class="radio radio-single">
               <input type="radio"/>
               <span></span>
              </label>
             </span>
            </div>
            <input type="text" class="form-control" aria-label="Text input with radio"/>
            <div class="input-group-append">
             <span class="input-group-text">
              <label class="radio radio-single">
               <input type="radio"/>
               <span></span>
              </label>
             </span>
            </div>
           </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>
        <!--end::Form-->
       </div>
      

Button Addons


       <div class="card card-custom">
        <div class="card-header">
         <h3 class="card-title">
          Button Addons
         </h3>
        </div>
        <!--begin::Form-->
        <form class="form">
         <div class="card-body">
          <div class="form-group">
           <div class="alert alert-custom alert-default" role="alert">
            <div class="alert-icon"><i class="flaticon-warning text-primary"></i></div>
            <div class="alert-text">
             Buttons in input groups must wrapped in a <code>.input-group-prepend</code> or <code>.input-group-append</code> for proper alignment and sizing.
            This is required due to default browser styles that cannot be overridden.
            </div>
           </div>
          </div>
          <div class="form-group">
           <label>Left Addon Button</label>
           <div class="input-group">
            <div class="input-group-prepend">
             <button class="btn btn-secondary" type="button">Go!</button>
            </div>
            <input type="text" class="form-control" placeholder="Search for..."/>
           </div>
          </div>
          <div class="form-group">
           <label>Right Addon Button</label>
           <div class="input-group">
            <input type="text" class="form-control" placeholder="Search for..."/>
            <div class="input-group-append">
             <button class="btn btn-secondary" type="button">Go!</button>
            </div>
           </div>
          </div>
          <div class="form-group">
           <label>Left & Right Addon Button</label>
           <div class="input-group">
            <div class="input-group-prepend">
             <button class="btn btn-secondary" type="button">Go!</button>
            </div>
            <input type="text" class="form-control" placeholder="Search for..."/>
            <div class="input-group-append">
             <button class="btn btn-secondary" type="button">Go!</button>
            </div>
           </div>
          </div>
          <div class="form-group">
           <label>Left Addon Button</label>
           <div class="input-group">
            <div class="input-group-prepend">
             <button class="btn btn-primary" type="button">Go!</button>
            </div>
            <input type="text" class="form-control" placeholder="Search for..."/>
           </div>
          </div>
          <div class="form-group">
           <label>Right Addon Button</label>
           <div class="input-group">
            <input type="text" class="form-control" placeholder="Search for..."/>
            <div class="input-group-append">
             <button class="btn btn-primary" type="button">Go!</button>
            </div>
           </div>
          </div>
          <div class="form-group mb-2">
           <label>Left & Right Addon Button</label>
           <div class="input-group">
            <div class="input-group-prepend">
             <button class="btn btn-success" type="button">Go!</button>
            </div>
            <input type="text" class="form-control" placeholder="Search for..."/>
            <div class="input-group-append">
             <button class="btn btn-warning" type="button">Go!</button>
            </div>
           </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>
        <!--end::Form-->
       </div>
      

Buttons With Dropdowns

Some help content goes here
Some help content goes here
Some help content goes here

       <div class="card card-custom">
        <div class="card-header">
         <h3 class="card-title">
          Buttons With Dropdowns
         </h3>
        </div>
        <!--begin::Form-->
        <form class="form">
         <div class="card-body">
          <div class="form-group">
           <div class="alert alert-custom alert-default" role="alert">
            <div class="alert-icon"><i class="flaticon-warning text-primary"></i></div>
            <div class="alert-text">
             The example form below demonstrates common HTML form elements that receive updated styles from Bootstrap with additional classes.
            </div>
           </div>
          </div>
          <div class="form-group">
           <label>Left Button Dropdown</label>
           <div class="input-group">
            <div class="input-group-prepend">
             <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Action
             </button>
             <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div role="separator" class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
             </div>
            </div>
            <input type="text" class="form-control" aria-label="Text input with dropdown button"/>
           </div>
           <span class="form-text text-muted">Some help content goes here</span>
          </div>
          <div class="form-group">
           <label>Right Button Dropdown</label>
           <div class="input-group">
            <input type="text" class="form-control" aria-label="Text input with dropdown button"/>
            <div class="input-group-append">
             <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Action
             </button>
             <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div role="separator" class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
             </div>
            </div>
           </div>
           <span class="form-text text-muted">Some help content goes here</span>
          </div>
          <div class="form-group mb-2">
           <label>Left & Right Button Dropdown</label>
           <div class="input-group">
            <div class="input-group-prepend">
             <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Action
             </button>
             <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div role="separator" class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
             </div>
            </div>
            <input type="text" class="form-control" aria-label="Text input with dropdown button"/>
            <div class="input-group-append">
             <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Action
             </button>
             <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div role="separator" class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
             </div>
            </div>
           </div>
           <span class="form-text text-muted">Some help content goes here</span>
          </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>
        <!--end::Form-->
       </div>
      

Solid Style

Some help content goes here
Some help content goes here
Some help content goes here
Some help content goes here

       <div class="card card-custom">
        <div class="card-header">
         <h3 class="card-title">
          Solid Style
         </h3>
        </div>
        <!--begin::Form-->
        <form class="form">
         <div class="card-body">
          <div class="form-group">
           <div class="alert alert-custom alert-default" role="alert">
            <div class="alert-icon"><i class="flaticon-warning text-primary"></i></div>
            <div class="alert-text">
             The example form below demonstrates common HTML form elements that receive updated styles from Bootstrap with additional classes.
            </div>
           </div>
          </div>
          <div class="form-group">
           <label>Left Addon</label>
           <div class="input-group input-group-solid">
            <div class="input-group-prepend"><span class="input-group-text"><i class="la la-exclamation-triangle icon-lg"></i></span></div>
            <input type="text" class="form-control" placeholder="Email" />
           </div>
           <span class="form-text text-muted">Some help content goes here</span>
          </div>
          <div class="form-group">
           <label>Right Addon</label>
           <div class="input-group input-group-solid">
            <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"/>
            <div class="input-group-append"><span class="input-group-text"><i class="la la-group icon-lg"></i></span></div>
           </div>
          </div>
          <div class="form-group">
           <label>Left Button Dropdown</label>
           <div class="input-group input-group-solid">
            <div class="input-group-prepend">
             <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Action
             </button>
             <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div role="separator" class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
             </div>
            </div>
            <input type="text" class="form-control" aria-label="Text input with dropdown button"/>
           </div>
           <span class="form-text text-muted">Some help content goes here</span>
          </div>
          <div class="form-group">
           <label>Right Button Dropdown</label>
           <div class="input-group input-group-solid">
            <input type="text" class="form-control" aria-label="Text input with dropdown button"/>
            <div class="input-group-append">
             <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Action
             </button>
             <div class="dropdown-menu dropdown-menu-right">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div role="separator" class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
             </div>
            </div>
           </div>
           <span class="form-text text-muted">Some help content goes here</span>
          </div>
          <div class="form-group">
           <label>Left & Right Button Dropdown</label>
           <div class="input-group input-group-solid">
            <div class="input-group-prepend">
             <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Action
             </button>
             <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div role="separator" class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
             </div>
            </div>
            <input type="text" class="form-control" aria-label="Text input with dropdown button"/>
            <div class="input-group-append">
             <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Action
             </button>
             <div class="dropdown-menu dropdown-menu-right">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div role="separator" class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
             </div>
            </div>
           </div>
           <span class="form-text text-muted">Some help content goes here</span>
          </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>
        <!--end::Form-->
       </div>
      

Quick Actions finance & reports

User Profile 15 messages

Recent Notifications

Important Notice

Lorem Ipsum is simply dummy text of the printing and industry.

System Update

There are many variations of passages of Lorem Ipsum available.

Server Maintenance

Contrary to popular belief, Lorem Ipsum is not simply random text.

DB Migration

If you are going to use a passage of Lorem Ipsum, you need.

System Messages
09:30 AM

To start a blog, think of a topic about and first brainstorm ways to write details

2:45 PM

To start a blog, think of a topic about and first brainstorm ways to write details

3:12 PM

To start a blog, think of a topic about and first brainstorm ways to write details

7:05 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Notifications
Pic
Marcus Smart UI/UX, Art Director
+65%
AH
Andreas Hawks Python Developer
+23%
SC
Sarah Connor HTML, CSS. jQuery
-34%
Pic
Amanda Harden UI/UX, Art Director
+72%
SR
Sean Robbins UI/UX, Art Director
+65%
JT
Jason Tatum ASP.NET Developer
+139%

Privacy Settings:

After you log in, you will be asked for additional information to confirm your identity.

Security Settings:

After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9