cfone/app/home/templates/ui-grid.html
2021-09-22 23:46:35 -04:00

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 %}