293 lines
7.2 KiB
HTML
293 lines
7.2 KiB
HTML
|
{% 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 %}
|