@@include('header.htm', { "title": "Sleek - Admin Dashboard Template", "className": "header-fixed sidebar-fixed sidebar-dark header-light" })
@@include('sidebar-with-footer.htm', { "parent": "ui-elements", "sub_parent": "components", "active": "alert" })

		<!-- ====================================
		——— LAYOUT CONTAINER
		===================================== -->
		<div class="layout-container">
			@@include('top-bar.htm')
				<div class="layout-content">
					<div class="flex-grow-1">
						@@include('breadcrumb.htm', { "parent": "UI Elements", "active": "Alerts" })
						<div class="content">
							<div class="card card-default mb-4 mt-3 mt-md-0 bg-white pt-5">
								<div class="card-header d-flex flex-wrap justify-content-between bg-white border-bottom-0 pb-xl-0">
									<h4>Default Alerts </h4>
								</div>
								<div class="card-body">
									<div class="row">
										<div class="col-lg-6">
											<label for="primary">primary alerts</label>
											<div class="alert alert-primary" role="alert">
												This is a primary alert—check it out!
											</div>

											<label for="secondary">secondary alerts</label>
											<div class="alert alert-secondary" role="alert">
												This is a secondary alert—check it out!
											</div>

											<label for="success">success alerts</label>
											<div class="alert alert-success" role="alert">
												This is a success alert—check it out!
											</div>

											<label for="danger">danger alerts</label>
											<div class="alert alert-danger" role="alert">
												A simple danger alert—check it out!
											</div>
										</div>
										<div class="col-lg-6">
											<label for="warning">warning alerts</label>
											<div class="alert alert-warning" role="alert">
												This is a warning alert—check it out!
											</div>

											<label for="info">info alerts</label>
											<div class="alert alert-info" role="alert">
												This is a info alert—check it out!
											</div>

											<label for="light">light alerts</label>
											<div class="alert alert-light" role="alert">
												This is a light alert—check it out!
											</div>
											<label for="dark">dark alerts</label>
											<div class="alert alert-dark" role="alert">
												This is a dark alert—check it out!
											</div>
										</div>
									</div>
								</div>
							</div>

							<!-- Icon Alert -->
							<div class="card card-default mb-4 mt-3 mt-md-0 bg-white pt-5">
								<div class="card-header d-flex flex-wrap justify-content-between bg-white border-bottom-0 pb-xl-0">
									<h4>Iconic Alerts with Background </h4>
								</div>
								<div class="card-body">
									<div class="row">
										<div class="col-lg-6">
											<label for="primary">primary alerts</label>
											<div class="alert alert-primary" role="alert">
												<i class="fa fa-warning mr-1"></i> This is a primary alert—check it out!
											</div>
											<label for="secondary">secondary alerts</label>
											<div class="alert alert-secondary" role="alert">
												<i class="fa fa-warning mr-1"></i> This is a secondary alert—check it out!
											</div>
											<label for="success">success alerts</label>
											<div class="alert alert-success" role="alert">
												<i class="fa fa-warning mr-1"></i> This is a success alert—check it out!
											</div>
											<label for="danger">danger alerts</label>
											<div class="alert alert-danger" role="alert">
												<i class="fa fa-warning mr-1"></i> This is a danger alert—check it out!
											</div>
										</div>
										<div class="col-lg-6">
											<label for="warning">warning alerts</label>
											<div class="alert alert-warning" role="alert">
												<i class="fa fa-warning mr-1"></i> This is a warning alert—check it out!
											</div>
											<label for="info">info alerts</label>
											<div class="alert alert-info" role="alert">
												<i class="fa fa-warning mr-1"></i> This is a info alert—check it out!
											</div>
											<label for="light">light alerts</label>
											<div class="alert alert-light" role="alert">
												<i class="fa fa-warning mr-1"></i> This is a light alert—check it out!
											</div>
											<label for="dark">dark alerts</label>
											<div class="alert alert-dark" role="alert">
												<i class="fa fa-warning mr-1"></i> This is a dark alert—check it out!
											</div>
										</div>
									</div>
								</div>
							</div>


							<!-- Dismisable alerts -->
							<div class="card card-default mb-4 mt-3 mt-md-0 bg-white pt-5">
								<div class="card-header d-flex flex-wrap justify-content-between bg-white border-bottom-0 pb-xl-0">
									<h4>Dismissible Alerts</h4>
								</div>
								<div class="card-body">
									<div class="row">
										<div class="col-lg-6">
											<label for="primary">primary alerts</label>
											<div class="alert alert-dismissible fade show alert-primary" role="alert">
												This is a primary alert—check it out!
												<button type="button" class="close" data-dismiss="alert" aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
											</div>
											<label for="secondary">secondary alerts</label>
											<div class="alert alert-dismissible fade show alert-secondary" role="alert">
												This is a secondary alert—check it out!
												<button type="button" class="close" data-dismiss="alert" aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
											</div>
											<label for="success">success alerts</label>
											<div class="alert alert-dismissible fade show alert-success" role="alert">
												This is a success alert—check it out!
												<button type="button" class="close" data-dismiss="alert" aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
											</div>
											<label for="danger">danger alerts</label>
											<div class="alert alert-dismissible fade show alert-danger" role="alert">
												This is a danger alert—check it out!
												<button type="button" class="close" data-dismiss="alert" aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
											</div>
										</div>
										<div class="col-lg-6">
											<label for="warning">warning alerts</label>
											<div class="alert alert-dismissible fade show alert-warning" role="alert">
												This is a warning alert—check it out!
												<button type="button" class="close" data-dismiss="alert" aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
											</div>
											<label for="info">info alerts</label>
											<div class="alert alert-dismissible fade show alert-info" role="alert">
												This is a info alert—check it out!
												<button type="button" class="close" data-dismiss="alert" aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
											</div>
											<label for="light">light alerts</label>
											<div class="alert alert-dismissible fade show alert-light" role="alert">
												This is a light alert—check it out!
												<button type="button" class="close" data-dismiss="alert" aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
											</div>
											<label for="dark">dark alerts</label>
											<div class="alert alert-dismissible fade show alert-dark" role="alert">
												This is a dark alert—check it out!
												<button type="button" class="close" data-dismiss="alert" aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
											</div>
										</div>
									</div>
								</div>
							</div>

							<!-- highlighted alerts -->
							<div class="card card-default mb-4 mt-3 mt-md-0 bg-white pt-5">
								<div class="card-header d-flex flex-wrap justify-content-between bg-white border-bottom-0 pb-xl-0">
									<h4>Heightlighted Alerts </h4>
								</div>
								<div class="card-body">
									<div class="row">
										<div class="col-lg-6">
											<label for="primary">primary alerts</label>
											<div class="alert alert-primary alert-highlighted" role="alert">
												This is a primary alert—check it out!
											</div>
											<label for="secondary">secondary alerts</label>
											<div class="alert alert-secondary alert-highlighted" role="alert">
												This is a secondary alert—check it out!
											</div>
											<label for="success">success alerts</label>
											<div class="alert alert-success alert-highlighted" role="alert">
												This is a success alert—check it out!
											</div>
											<label for="danger">danger alerts</label>
											<div class="alert alert-danger alert-highlighted" role="alert">
												This is a danger alert—check it out!
											</div>
										</div>
										<div class="col-lg-6">
											<label for="warning">warning alerts</label>
											<div class="alert alert-warning alert-highlighted" role="alert">
												This is a warning alert—check it out!
											</div>
											<label for="info">info alerts</label>
											<div class="alert alert-info alert-highlighted" role="alert">
												This is a info alert—check it out!
											</div>
											<label for="light">light alerts</label>
											<div class="alert alert-light alert-highlighted" role="alert">
												This is a light alert—check it out!
											</div>
											<label for="dark">dark alerts</label>
											<div class="alert alert-dark alert-highlighted" role="alert">
												This is a dark alert—check it out!
											</div>
										</div>
									</div>
								</div>
							</div>

							<!-- Outline Alerts -->
							<div class="card card-default mb-4 mt-3 mt-md-0 bg-white pt-5">
								<div class="card-header d-flex flex-wrap justify-content-between bg-white border-bottom-0 pb-xl-0">
									<h4> Outline Alerts </h4>
								</div>
								<div class="card-body">
									<div class="row">
										<div class="col-lg-6">
											<label for="primary">primary alerts</label>
											<div class="alert alert-primary alert-outlined alert-dismissible fade show" role="alert">
												This is a primary alert—check it out!
												<button type="button" class="close" data-dismiss="alert" aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
											</div>
											<label for="secondary">secondary alerts</label>
											<div class="alert alert-secondary alert-outlined alert-dismissible fade show" role="alert">
												This is a secondary alert—check it out!
												<button type="button" class="close" data-dismiss="alert" aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
											</div>
											<label for="success">success alerts</label>
											<div class="alert alert-success alert-outlined alert-dismissible fade show" role="alert">
												This is a success alert—check it out!
												<button type="button" class="close" data-dismiss="alert" aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
											</div>
											<label for="danger">danger alerts</label>
											<div class="alert alert-danger alert-outlined alert-dismissible fade show" role="alert">
												This is a danger alert—check it out!
												<button type="button" class="close" data-dismiss="alert" aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
											</div>
										</div>
										<div class="col-lg-6">
											<label for="warning">warning alerts</label>
											<div class="alert alert-warning alert-outlined alert-dismissible fade show" role="alert">
												This is a warning alert—check it out!
												<button type="button" class="close" data-dismiss="alert" aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
											</div>
											<label for="info">info alerts</label>
											<div class="alert alert-info alert-outlined alert-dismissible fade show" role="alert">
												This is a info alert—check it out!
												<button type="button" class="close" data-dismiss="alert" aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
											</div>
											<label for="light">light alerts</label>
											<div class="alert alert-light alert-outlined alert-dismissible fade show" role="alert">
												This is a light alert—check it out!
												<button type="button" class="close" data-dismiss="alert" aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
											</div>
											<label for="dark">dark alerts</label>
											<div class="alert alert-dark alert-outlined alert-dismissible fade show" role="alert">
												This is a dark alert—check it out!
												<button type="button" class="close" data-dismiss="alert" aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
											</div>
										</div>
									</div>
								</div>
							</div>



						</div>

@@include('footer.htm')