1 | Keenthemes

Basic Action Bars

Actions

Default Action Bar

Full Name: Please enter your full name

Email address: We'll never share your email with anyone else

Communication:

Email SMS Phone


								<form class="form">
									<div class="card-body">
										<div class="form-group">
											<label>Full Name:</label>
											<input type="email" class="form-control" placeholder="Enter full name"/>
											<span class="form-text text-muted">Please enter your full name</span>
										</div>
										<div class="form-group">
											<label>Email address:</label>
											<input type="email" class="form-control" placeholder="Enter email"/>
											<span class="form-text text-muted">We'll never share your email with anyone else</span>
										</div>
										<div class="form-group mb-0">
											<label>Communication:</label>
											<div class="checkbox-list">
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													Email
												</label>
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													SMS
												</label>
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													Phone
												</label>
											</div>
										</div>
									</div>
									<div class="card-footer">
										<button type="reset" class="btn btn-primary mr-2">Submit</button>
										<button type="reset" class="btn btn-secondary">Cancel</button>
									</div>
								</form>

Right Action Bar

Full Name: Please enter your full name

Email address: We'll never share your email with anyone else

Communication:

Email SMS Phone


								<form class="form">
									<div class="card-body">
										<div class="form-group">
											<label>Full Name:</label>
											<input type="email" class="form-control" placeholder="Enter full name"/>
											<span class="form-text text-muted">Please enter your full name</span>
										</div>
										<div class="form-group">
											<label>Email address:</label>
											<input type="email" class="form-control" placeholder="Enter email"/>
											<span class="form-text text-muted">We'll never share your email with anyone else</span>
										</div>
										<div class="form-group mb-0">
											<label>Communication:</label>
											<div class="checkbox-list">
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													Email
												</label>
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													SMS
												</label>
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													Phone
												</label>
											</div>
										</div>
									</div>
									<div class="card-footer text-right">
										<button type="reset" class="btn btn-primary mr-2">Submit</button>
										<button type="reset" class="btn btn-secondary">Cancel</button>
									</div>
								</form>

Multiple Buttons

Full Name: Please enter your full name

Email address: We'll never share your email with anyone else

Communication:

Email SMS Phone


								<form class="form">
									<div class="card-body">
										<div class="form-group">
											<label>Full Name:</label>
											<input type="email" class="form-control" placeholder="Enter full name"/>
											<span class="form-text text-muted">Please enter your full name</span>
										</div>
										<div class="form-group">
											<label>Email address:</label>
											<input type="email" class="form-control" placeholder="Enter email"/>
											<span class="form-text text-muted">We'll never share your email with anyone else</span>
										</div>
										<div class="form-group mb-0">
											<label>Communication:</label>
											<div class="checkbox-list">
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													Email
												</label>
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													SMS
												</label>
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													Phone
												</label>
											</div>
										</div>
									</div>
									<div class="card-footer">
										<div class="row">
											<div class="col text-left">
												<button type="reset" class="btn btn-primary  mr-2">Submit</button>
												<button type="reset" class="btn btn-secondary">Cancel</button>
											</div>
											<div class="col text-right">
												<button type="reset" class="btn btn-danger">Delete</button>
											</div>
										</div>
									</div>
								</form>

Action Button & Link

Full Name: Please enter your full name

Email address: We'll never share your email with anyone else

Communication:

Email SMS Phone


								<form class="form">
									<div class="card-body">
										<div class="form-group">
											<label>Full Name:</label>
											<input type="email" class="form-control" placeholder="Enter full name"/>
											<span class="form-text text-muted">Please enter your full name</span>
										</div>
										<div class="form-group">
											<label>Email address:</label>
											<input type="email" class="form-control" placeholder="Enter email"/>
											<span class="form-text text-muted">We'll never share your email with anyone else</span>
										</div>
										<div class="form-group mb-0">
											<label>Communication:</label>
											<div class="checkbox-list">
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													Email
												</label>
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													SMS
												</label>
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													Phone
												</label>
											</div>
										</div>
									</div>
									<div class="card-footer text-right">
										<button type="reset" class="btn btn-primary mr-2">Submit</button>
										<span class="ml-2">or <a href="#" class="font-weight-bold ml-2">Cancel</a></span>
									</div>
								</form>

or Cancel

Aside Space

Full Name: Please enter your full name

Email address: We'll never share your email with anyone else

Communication:

Email SMS Phone


								<form class="form">
									<div class="card-body">
										<div class="form-group">
											<label>Full Name:</label>
											<input type="email" class="form-control" placeholder="Enter full name"/>
											<span class="form-text text-muted">Please enter your full name</span>
										</div>
										<div class="form-group">
											<label>Email address:</label>
											<input type="email" class="form-control" placeholder="Enter email"/>
											<span class="form-text text-muted">We'll never share your email with anyone else</span>
										</div>
										<div class="form-group mb-0">
											<label>Communication:</label>
											<div class="checkbox-list">
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													Email
												</label>
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													SMS
												</label>
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													Phone
												</label>
											</div>
										</div>
									</div>
									<div class="card-footer">
										<div class="row">
											<div class="col text-left">
												<button type="reset" class="btn btn-primary mr-2">Submit</button>
												<button type="reset" class="btn btn-secondary">Cancel</button>
											</div>
											<div class="col text-right">
												<button type="reset" class="btn btn-danger">Delete</button>
											</div>
										</div>
									</div>
								</form>

Solid Bar

Full Name: Please enter your full name

Email address: We'll never share your email with anyone else

Communication:

Email SMS Phone


								<form class="form">
									<div class="card-body">
										<div class="form-group">
											<label>Full Name:</label>
											<input type="email" class="form-control" placeholder="Enter full name"/>
											<span class="form-text text-muted">Please enter your full name</span>
										</div>
										<div class="form-group">
											<label>Email address:</label>
											<input type="email" class="form-control" placeholder="Enter email"/>
											<span class="form-text text-muted">We'll never share your email with anyone else</span>
										</div>
										<div class="form-group mb-0">
											<label>Communication:</label>
											<div class="checkbox-list">
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													Email
												</label>
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													SMS
												</label>
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													Phone
												</label>
											</div>
										</div>
									</div>
									<div class="card-footer text-right bg-gray-100 border-top-0">
										<button type="reset" class="btn btn-primary">Submit</button>
										<span class="mx-2">or</span>
										<a href="#" class="btn btn-link btn-link-primary">Cancel</a>
									</div>
								</form>

or Cancel

Top & Bottom Actions Bars

Top Actions:

Full Name: Please enter your full name

Email address: We'll never share your email with anyone else

Communication:

Email SMS Phone


								<form class="form">
									<div class="card-footer bg-gray-100 border-top-0">
										<div class="row align-items-center">
											<div class="col text-left">
												Top Actions:
											</div>
											<div class="col text-right">
												<button type="reset" class="btn btn-primary font-weight-bold mr-2">Submit</button>
												<button type="reset" class="btn btn-light-primary font-weight-bold">Cancel</button>
											</div>
										</div>
									</div>
									<div class="card-body">
										<div class="form-group">
											<label>Full Name:</label>
											<input type="email" class="form-control" placeholder="Enter full name"/>
											<span class="form-text text-muted">Please enter your full name</span>
										</div>
										<div class="form-group">
											<label>Email address:</label>
											<input type="email" class="form-control" placeholder="Enter email"/>
											<span class="form-text text-muted">We'll never share your email with anyone else</span>
										</div>
										<div class="form-group mb-0">
											<label>Communication:</label>
											<div class="checkbox-list">
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													Email
												</label>
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													SMS
												</label>
												<label class="checkbox checkbox-outline">
													<input type="checkbox"/>
													<span></span>
													Phone
												</label>
											</div>
										</div>
									</div>
									<div class="card-footer bg-gray-100 border-top-0 text-right">
										<button type="reset" class="btn btn-primary font-weight-bold mr-2">Submit</button>
										<button type="reset" class="btn btn-light-primary font-weight-bold">Cancel</button>
									</div>
								</form>

Horizontal Form Layout

Full Name:

Please enter your full name

Email address:

We'll never share your email with anyone else

Communication:

Email SMS Phone


								<form class="form">
									<div class="card-body">
										<div class="form-group row mt-4">
											<label  class="col-3 col-form-label">Full Name:</label>
											<div class="col-9">
												<input type="email" class="form-control" placeholder="Enter full name"/>
												<span class="form-text text-muted">Please enter your full name</span>
											</div>
										</div>
										<div class="form-group row">
											<label  class="col-3 col-form-label">Email address:</label>
											<div class="col-9">
												<input type="email" class="form-control" placeholder="Enter email"/>
												<span class="form-text text-muted">We'll never share your email with anyone else</span>
											</div>
										</div>
										<div class="form-group row mb-1">
											<label  class="col-3 col-form-label">Communication:</label>
											<div class="col-9">
												<div class="checkbox-inline">
													<label class="checkbox checkbox-outline">
														<input type="checkbox"/>
														<span></span>
														Email
													</label>
													<label class="checkbox checkbox-outline">
														<input type="checkbox"/>
														<span></span>
														SMS
													</label>
													<label class="checkbox checkbox-outline">
														<input type="checkbox"/>
														<span></span>
														Phone
													</label>
												</div>
											</div>
										</div>
									</div>
									<div class="card-footer">
										<div class="row">
											<div class="col-3">

											</div>
											<div class="col-9">
												<button type="reset" class="btn btn-primary mr-2">Submit</button>
												<button type="reset" class="btn btn-secondary">Cancel</button>
											</div>
										</div>
									</div>
								</form>

Shopping Cart

Lands, Houses, Ranchos, Farms

Tasks Overview Pending 10 tasks

Project Briefing Project Manager

Concept Design Art Director

Functional Logics Lead Developer

Development DevOps

Testing QA Managers

My Activity 890,344 Sales

08:42

Outlines keep you honest. And keep structure

10:00

AEOL meeting

14:37

Make deposit USD 700. to ESL

16:50

Indulging in poorly driving and keep structure keep great

21:03

New order placed #XF-2356.

23:07

Outlines keep and you honest. Indulging in poorly driving

16:50

Indulging in poorly driving and keep structure keep great

21:03

New order placed #XF-2356.

Pricing Tables

Wizards

Invoices

Login

Classic Login

Error Pages

Basic Action Bars

Default Action Bar

Right Action Bar

Multiple Buttons

Action Button & Link

Aside Space

Solid Bar

Top & Bottom Actions Bars

Horizontal Form Layout

Tasks Overview Pending 10 tasks

My Activity 890,344 Sales

Notifications 24 New

Quick Actions finance & reports

User Profile 12 messages

Recent Notifications

System Messages

Notifications

Customer Care

Reports

Memebers

Select A Demo

Demo 1

Demo 2

Demo 3

Demo 4

Demo 5

Demo 6

Demo 7

Demo 8

Demo 9

Demo 10

Demo 11

Demo 12

Demo 13

Demo 14

Demo 15

Demo 16

Demo 17

Demo 18

Demo 19

Demo 20

Demo 21

Demo 22

Demo 23

Demo 24

Demo 25

Demo 26

Demo 27

Demo 28

Demo 29

Demo 30