Logo
Stockholm-icons / Code / Compiling Created with Sketch.

Message Center 25

Stockholm-icons / Design / Color-profile Created with Sketch.
Project Launch Project campaign planning
Stockholm-icons / Communication / Write Created with Sketch.
Report Generation Annual report generation
Stockholm-icons / Communication / Share Created with Sketch.
Smart App Project Managemnt & Design
Stockholm-icons / General / Thunder-move Created with Sketch.
Volume Service App Analytics & Requirement Study
Stockholm-icons / Communication / Shield-user Created with Sketch.
Reportio App Reporting Dashboard App Planning
Stockholm-icons / Communication / Mail-notification Created with Sketch.
Expo Loop System Analytics & Development
Stockholm-icons / Design / Bucket Created with Sketch.
Klup App App Design & Development
All caught up!
No new messages.
Stockholm-icons / Media / Equalizer Created with Sketch.

Quick Actions

23 new tasks
Stockholm-icons / Shopping / Sale2 Created with Sketch. Accounting eCommerce
Stockholm-icons / Home / Globe Created with Sketch. Management Company Reports
Stockholm-icons / Shopping / Box2 Created with Sketch. Projects Completed Tasks
Stockholm-icons / Communication / Group Created with Sketch. Members Latest joinings
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.
Stockholm-icons / Communication / Chat6 Created with Sketch.
Input Groups

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
$
Stockholm-icons / General / Search Created with Sketch.
Stockholm-icons / Code / Compiling Created with Sketch. 

							<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

Action Another action Something else here Separated link
Some help content goes here
Action Another action Something else here Separated link
Some help content goes here
Action Another action Something else here Separated link
Action Another action Something else here Separated link
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
Action Another action Something else here Separated link
Some help content goes here
Action Another action Something else here Separated link
Some help content goes here
Action Another action Something else here Separated link
Action Another action Something else here Separated link
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>
2024© Keenthemes
About Team Contact

User Profile 15 messages

Ryan Smith
Art Director
Stockholm-icons / Communication / Mail-notification Created with Sketch. ryan@keen.com
Stockholm-icons / Communication / Adress-book2 Created with Sketch.
My Account
Profile info update
Stockholm-icons / General / Settings-1 Created with Sketch.
My Tasks
Todo and tasks
Stockholm-icons / General / Half-star Created with Sketch.
My Events
Logs and notifications
Stockholm-icons / Communication / Mail-opened Created with Sketch.
My Statements
latest tasks and projects
Sign Out
Recent Notifications
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Files / File-done Created with Sketch.

Important Notice

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

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Design / Pen&ruller Created with Sketch.

System Update

There are many variations of passages of Lorem Ipsum available.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / General / Thunder-move Created with Sketch.

Server Maintenance

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

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Home / Alarm-clock Created with Sketch.

DB Migration

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

System Messages
Stockholm-icons / Communication / Group-chat Created with Sketch.
09:30 AM

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

Stockholm-icons / General / Attachment2 Created with Sketch.
2:45 PM

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

Stockholm-icons / Home / Library Created with Sketch.
3:12 PM

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

Stockholm-icons / Communication / Add-user Created with Sketch.
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% Stockholm-icons / Navigation / Angle-right Created with Sketch.
AH
Andreas Hawks Python Developer
+23% Stockholm-icons / Navigation / Angle-right Created with Sketch.
SC
Sarah Connor HTML, CSS. jQuery
-34% Stockholm-icons / Navigation / Angle-right Created with Sketch.
Pic
Amanda Harden UI/UX, Art Director
+72% Stockholm-icons / Navigation / Angle-right Created with Sketch.
SR
Sean Robbins UI/UX, Art Director
+65% Stockholm-icons / Navigation / Angle-right Created with Sketch.
JT
Jason Tatum ASP.NET Developer
+139% Stockholm-icons / Navigation / Angle-right Created with Sketch.

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.

Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo

Demo 1
HTML RTL
Demo 2
HTML RTL
Demo 3
HTML RTL
Demo 4
HTML RTL
Demo 5
HTML RTL
Demo 6
HTML RTL
Demo 7
HTML RTL
Demo 8
Coming soon
Demo 9
Coming soon
Buy Keen Now!