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

{% block title %} UI Cards {% 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">Grid</h1>

			<div class="card">
				<div class="card-header">
					<h5 class="card-title">Grid system</h5>
					<h6 class="card-subtitle text-muted">Powerful mobile-first flexbox grid</h6>
				</div>
				<div class="card-body">
					<div class="row">
						<div class="col-md-12 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-12
								</div>
							</div>
						</div>
					</div>
					<!-- /.row -->

					<div class="row">
						<div class="col-md-6 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-6
								</div>
							</div>
						</div>
						<div class="col-md-6 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-6
								</div>
							</div>
						</div>
					</div>
					<!-- /.row -->

					<div class="row">
						<div class="col-md-4 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-4
								</div>
							</div>
						</div>
						<div class="col-md-4 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-4
								</div>
							</div>
						</div>
						<div class="col-md-4 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-4
								</div>
							</div>
						</div>
					</div>
					<!-- /.row -->

					<div class="row">
						<div class="col-md-3 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-3
								</div>
							</div>
						</div>
						<div class="col-md-3 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-3
								</div>
							</div>
						</div>
						<div class="col-md-3 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-3
								</div>
							</div>
						</div>
						<div class="col-md-3 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-3
								</div>
							</div>
						</div>
					</div>
					<!-- /.row -->

					<div class="row">
						<div class="col-md-2 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-2
								</div>
							</div>
						</div>
						<div class="col-md-2 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-2
								</div>
							</div>
						</div>
						<div class="col-md-2 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-2
								</div>
							</div>
						</div>
						<div class="col-md-2 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-2
								</div>
							</div>
						</div>
						<div class="col-md-2 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-2
								</div>
							</div>
						</div>
						<div class="col-md-2 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-2
								</div>
							</div>
						</div>
					</div>
					<!-- /.row -->

					<div class="row d-none d-xxl-flex">
						<div class="col-md-1 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-1
								</div>
							</div>
						</div>
						<div class="col-md-1 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-1
								</div>
							</div>
						</div>
						<div class="col-md-1 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-1
								</div>
							</div>
						</div>
						<div class="col-md-1 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-1
								</div>
							</div>
						</div>
						<div class="col-md-1 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-1
								</div>
							</div>
						</div>
						<div class="col-md-1 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-1
								</div>
							</div>
						</div>
						<div class="col-md-1 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-1
								</div>
							</div>
						</div>
						<div class="col-md-1 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-1
								</div>
							</div>
						</div>
						<div class="col-md-1 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-1
								</div>
							</div>
						</div>
						<div class="col-md-1 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-1
								</div>
							</div>
						</div>
						<div class="col-md-1 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-1
								</div>
							</div>
						</div>
						<div class="col-md-1 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-1
								</div>
							</div>
						</div>
					</div>
					<!-- /.row -->

					<div class="row">
						<div class="col-md-8 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-8
								</div>
							</div>
						</div>
						<div class="col-md-4 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-4
								</div>
							</div>
						</div>
					</div>
					<!-- /.row -->

					<div class="row">
						<div class="col-md-3 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-3
								</div>
							</div>
						</div>
						<div class="col-md-6 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-6
								</div>
							</div>
						</div>
						<div class="col-md-3 text-center">
							<div class="card bg-light py-2 py-md-3 border">
								<div class="card-body">
									.col-md-3
								</div>
							</div>
						</div>
					</div>
					<!-- /.row -->
				</div>
			</div>

		</div>
	</main>

{% endblock content %}

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