{% extends "layouts/base.html" %}

{% block title %} UI Buttons {% endblock %} 

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

	<main class="content">
		<div class="container-fluid p-0">

			<h1 class="h3 mb-3">Buttons</h1>

			<div class="row">
				<div class="col-12 col-lg-6">
					<div class="card">
						<div class="card-header">
							<h5 class="card-title">Basic Buttons</h5>
							<h6 class="card-subtitle text-muted">Default Bootstrap buttons style.</h6>
						</div>
						<div class="card-body text-center">
							<div class="mb-3">
								<button class="btn btn-primary">Primary</button>
								<button class="btn btn-secondary">Secondary</button>
								<button class="btn btn-success">Success</button>
								<button class="btn btn-danger">Danger</button>
								<button class="btn btn-warning">Warning</button>
								<button class="btn btn-info">Info</button>
							</div>
							<div>
								<button class="btn btn-primary" disabled>Primary</button>
								<button class="btn btn-secondary" disabled>Secondary</button>
								<button class="btn btn-success" disabled>Success</button>
								<button class="btn btn-danger" disabled>Danger</button>
								<button class="btn btn-warning" disabled>Warning</button>
								<button class="btn btn-info" disabled>Info</button>
							</div>
						</div>
					</div>
				</div>

				<div class="col-12 col-lg-6">
					<div class="card">
						<div class="card-header">
							<h5 class="card-title">Rounded Buttons</h5>
							<h6 class="card-subtitle text-muted">Rounded Bootstrap buttons.</h6>
						</div>
						<div class="card-body text-center">
							<div class="mb-3">
								<button class="btn btn-pill btn-primary">Primary</button>
								<button class="btn btn-pill btn-secondary">Secondary</button>
								<button class="btn btn-pill btn-success">Success</button>
								<button class="btn btn-pill btn-danger">Danger</button>
								<button class="btn btn-pill btn-warning">Warning</button>
								<button class="btn btn-pill btn-info">Info</button>
							</div>
							<div>
								<button class="btn btn-pill btn-primary" disabled>Primary</button>
								<button class="btn btn-pill btn-secondary" disabled>Secondary</button>
								<button class="btn btn-pill btn-success" disabled>Success</button>
								<button class="btn btn-pill btn-danger" disabled>Danger</button>
								<button class="btn btn-pill btn-warning" disabled>Warning</button>
								<button class="btn btn-pill btn-info" disabled>Info</button>
							</div>
						</div>
					</div>
				</div>

				<div class="col-12 col-lg-6">
					<div class="card">
						<div class="card-header">
							<h5 class="card-title">Outline Buttons</h5>
							<h6 class="card-subtitle text-muted">Buttons without background color.</h6>
						</div>
						<div class="card-body text-center">
							<div class="mb-3">
								<button class="btn btn-outline-primary">Primary</button>
								<button class="btn btn-outline-secondary">Secondary</button>
								<button class="btn btn-outline-success">Success</button>
								<button class="btn btn-outline-danger">Danger</button>
								<button class="btn btn-outline-warning">Warning</button>
								<button class="btn btn-outline-info">Info</button>
							</div>
							<div>
								<button class="btn btn-outline-primary" disabled>Primary</button>
								<button class="btn btn-outline-secondary" disabled>Secondary</button>
								<button class="btn btn-outline-success" disabled>Success</button>
								<button class="btn btn-outline-danger" disabled>Danger</button>
								<button class="btn btn-outline-warning" disabled>Warning</button>
								<button class="btn btn-outline-info" disabled>Info</button>
							</div>
						</div>
					</div>
				</div>

				<div class="col-12 col-lg-6">
					<div class="card">
						<div class="card-header">
							<h5 class="card-title">Square Buttons</h5>
							<h6 class="card-subtitle text-muted">Buttons without border radius.</h6>
						</div>
						<div class="card-body text-center">
							<div class="mb-3">
								<button class="btn btn-square btn-primary">Primary</button>
								<button class="btn btn-square btn-secondary">Secondary</button>
								<button class="btn btn-square btn-success">Success</button>
								<button class="btn btn-square btn-danger">Danger</button>
								<button class="btn btn-square btn-warning">Warning</button>
								<button class="btn btn-square btn-info">Info</button>
							</div>
							<div>
								<button class="btn btn-square btn-primary" disabled>Primary</button>
								<button class="btn btn-square btn-secondary" disabled>Secondary</button>
								<button class="btn btn-square btn-success" disabled>Success</button>
								<button class="btn btn-square btn-danger" disabled>Danger</button>
								<button class="btn btn-square btn-warning" disabled>Warning</button>
								<button class="btn btn-square btn-info" disabled>Info</button>
							</div>
						</div>
					</div>
				</div>

				<div class="col-12 col-lg-6">
					<div class="card">
						<div class="card-header">
							<h5 class="card-title">Icon Buttons</h5>
							<h6 class="card-subtitle text-muted">Default Bootstrap buttons with icons.</h6>
						</div>
						<div class="card-body text-center">
							<div class="mb-3">
								<button class="btn btn-primary"><i class="far fa-smile"></i> Primary</button>
								<button class="btn btn-secondary"><i class="fas fa-globe-americas"></i> Secondary</button>
								<button class="btn btn-success"><i class="fas fa-check"></i> Success</button>
								<button class="btn btn-danger"><i class="fas fa-times"></i> Danger</button>
								<button class="btn btn-warning"><i class="fas fa-exclamation"></i> Warning</button>
								<button class="btn btn-info"><i class="fas fa-info"></i> Info</button>
							</div>

							<div>
								<button class="btn btn-primary"><i class="far fa-smile"></i></button>
								<button class="btn btn-secondary"><i class="fas fa-globe-americas"></i></button>
								<button class="btn btn-success"><i class="fas fa-check"></i></button>
								<button class="btn btn-danger"><i class="fas fa-times"></i></button>
								<button class="btn btn-warning"><i class="fas fa-exclamation"></i></button>
								<button class="btn btn-info"><i class="fas fa-info"></i></button>
							</div>
						</div>
					</div>
				</div>

				<div class="col-12 col-lg-6">
					<div class="card">
						<div class="card-header">
							<h5 class="card-title">Button Sizes</h5>
							<h6 class="card-subtitle text-muted">Fancy larger or smaller buttons.</h6>
						</div>
						<div class="card-body text-center">
							<div class="mb-3">
								<button class="btn btn-primary btn-sm">Small</button>
								<button class="btn btn-primary">Medium</button>
								<button class="btn btn-primary btn-lg">Large</button>
							</div>
							<div>
								<button class="btn btn-primary btn-sm"><i class="fas fa-globe-americas"></i> Small</button>
								<button class="btn btn-primary"><i class="fas fa-globe-americas"></i> Medium</button>
								<button class="btn btn-primary btn-lg"><i class="fas fa-globe-americas"></i> Large</button>
							</div>
						</div>
					</div>
				</div>

				<div class="col-12 col-lg-6">
					<div class="card">
						<div class="card-header">
							<h5 class="card-title">Button Dropdown</h5>
							<h6 class="card-subtitle text-muted">Dropdowns styles with buttons.</h6>
						</div>
						<div class="card-body text-center">
							<div class="mb-3">
								<div class="btn-group">
									<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Primary
		</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 class="dropdown-divider"></div>
										<a class="dropdown-item" href="#">Separated link</a>
									</div>
								</div>
								<div class="btn-group">
									<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Secondary
		</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 class="dropdown-divider"></div>
										<a class="dropdown-item" href="#">Separated link</a>
									</div>
								</div>
								<div class="btn-group">
									<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Success
		</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 class="dropdown-divider"></div>
										<a class="dropdown-item" href="#">Separated link</a>
									</div>
								</div>
								<div class="btn-group">
									<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Danger
		</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 class="dropdown-divider"></div>
										<a class="dropdown-item" href="#">Separated link</a>
									</div>
								</div>
								<div class="btn-group">
									<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Warning
		</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 class="dropdown-divider"></div>
										<a class="dropdown-item" href="#">Separated link</a>
									</div>
								</div>
								<div class="btn-group">
									<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Info
		</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 class="dropdown-divider"></div>
										<a class="dropdown-item" href="#">Separated link</a>
									</div>
								</div>
							</div>

							<div>
								<div class="btn-group btn-group-sm">
									<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Primary
		</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 class="dropdown-divider"></div>
										<a class="dropdown-item" href="#">Separated link</a>
									</div>
								</div>
								<div class="btn-group btn-group-sm">
									<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Secondary
		</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 class="dropdown-divider"></div>
										<a class="dropdown-item" href="#">Separated link</a>
									</div>
								</div>
								<div class="btn-group btn-group-sm">
									<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Success
		</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 class="dropdown-divider"></div>
										<a class="dropdown-item" href="#">Separated link</a>
									</div>
								</div>
								<div class="btn-group btn-group-sm">
									<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Danger
		</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 class="dropdown-divider"></div>
										<a class="dropdown-item" href="#">Separated link</a>
									</div>
								</div>
								<div class="btn-group btn-group-sm">
									<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Warning
		</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 class="dropdown-divider"></div>
										<a class="dropdown-item" href="#">Separated link</a>
									</div>
								</div>
								<div class="btn-group btn-group-sm">
									<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Info
		</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 class="dropdown-divider"></div>
										<a class="dropdown-item" href="#">Separated link</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="col-12 col-lg-6">
					<div class="card">
						<div class="card-header">
							<h5 class="card-title">Button Group</h5>
							<h6 class="card-subtitle text-muted">Button group components.</h6>
						</div>
						<div class="card-body">
							<h6 class="card-subtitle mb-2 text-muted">Horizontal button group</h6>
							<div class="btn-group btn-group-lg mb-3" role="group" aria-label="Large button group">
								<button type="button" class="btn btn-secondary">Left</button>
								<button type="button" class="btn btn-secondary">Middle</button>
								<button type="button" class="btn btn-secondary">Right</button>
							</div>
							<br>
							<div class="btn-group mb-3" role="group" aria-label="Default button group">
								<button type="button" class="btn btn-secondary">Left</button>
								<button type="button" class="btn btn-secondary">Middle</button>
								<button type="button" class="btn btn-secondary">Right</button>
							</div>
							<br>
							<div class="btn-group btn-group-sm mb-4" role="group" aria-label="Small button group">
								<button type="button" class="btn btn-secondary">Left</button>
								<button type="button" class="btn btn-secondary">Middle</button>
								<button type="button" class="btn btn-secondary">Right</button>
							</div>

							<h6 class="card-subtitle mb-2 text-muted">Button toolbar</h6>
							<div class="btn-toolbar mb-4" role="toolbar" aria-label="Toolbar with button groups">
								<div class="btn-group mr-2" role="group" aria-label="First group">
									<button type="button" class="btn btn-secondary">1</button>
									<button type="button" class="btn btn-secondary">2</button>
									<button type="button" class="btn btn-secondary">3</button>
									<button type="button" class="btn btn-secondary">4</button>
								</div>
								<div class="btn-group mr-2" role="group" aria-label="Second group">
									<button type="button" class="btn btn-secondary">5</button>
									<button type="button" class="btn btn-secondary">6</button>
									<button type="button" class="btn btn-secondary">7</button>
								</div>
								<div class="btn-group" role="group" aria-label="Third group">
									<button type="button" class="btn btn-secondary">8</button>
								</div>
							</div>

							<h6 class="card-subtitle mb-2 text-muted">Vertical button group</h6>
							<div class="btn-toolbar">
								<div class="btn-group-vertical mr-2" role="group" aria-label="Vertical button group">
									<button type="button" class="btn btn-primary">Button</button>
									<button type="button" class="btn btn-primary">Button</button>
									<button type="button" class="btn btn-primary">Button</button>
								</div>
								<div class="btn-group-vertical mr-2" role="group" aria-label="Vertical button group">
									<button type="button" class="btn btn-success">Button</button>
									<button type="button" class="btn btn-success">Button</button>
									<button type="button" class="btn btn-success">Button</button>
								</div>
								<div class="btn-group-vertical mr-2" role="group" aria-label="Vertical button group">
									<button type="button" class="btn btn-warning">Button</button>
									<button type="button" class="btn btn-warning">Button</button>
									<button type="button" class="btn btn-warning">Button</button>
								</div>
								<div class="btn-group-vertical mr-2" role="group" aria-label="Vertical button group">
									<button type="button" class="btn btn-danger">Button</button>
									<button type="button" class="btn btn-danger">Button</button>
									<button type="button" class="btn btn-danger">Button</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- /.row -->

		</div>
	</main>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}{% endblock javascripts %}