<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>
<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>
.input-group
<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>
<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>
<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>
.input-group-prepend
.input-group-append
<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>
<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>
<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>
