<?php require 'inc/_global/config.php'; ?>
<?php require 'inc/backend/config.php'; ?>
<?php require 'inc/_global/views/head_start.php'; ?>
<?php require 'inc/_global/views/head_end.php'; ?>
<?php require 'inc/_global/views/page_start.php'; ?>

<!-- Hero -->
<div class="bg-body-light">
    <div class="content content-full">
        <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
            <h1 class="flex-sm-fill h3 my-2">
                Grid <small class="d-block d-sm-inline-block mt-2 mt-sm-0 font-size-base font-w400 text-muted">Smart and super flexible for building awesome interfaces.</small>
            </h1>
            <nav class="flex-sm-00-auto ml-sm-3" aria-label="breadcrumb">
                <ol class="breadcrumb breadcrumb-alt">
                    <li class="breadcrumb-item">Elements</li>
                    <li class="breadcrumb-item" aria-current="page">
                        <a class="link-fx" href="">Grid</a>
                    </li>
                </ol>
            </nav>
        </div>
   </div>
</div>
<!-- END Hero -->

<!-- Page Content -->
<div class="content">
    <!-- Grid -->
    <h2 class="content-heading">Grid <small>Columns never collapse</small></h2>
    <div class="row text-center">
        <div class="col-3">
            <div class="block">
                <div class="block-content">
                    <p><code>col-3</code></p>
                </div>
            </div>
        </div>
        <div class="col-3">
            <div class="block">
                <div class="block-content">
                    <p><code>col-3</code></p>
                </div>
            </div>
        </div>
        <div class="col-3">
            <div class="block">
                <div class="block-content">
                    <p><code>col-3</code></p>
                </div>
            </div>
        </div>
        <div class="col-3">
            <div class="block">
                <div class="block-content">
                    <p><code>col-3</code></p>
                </div>
            </div>
        </div>
    </div>
    <!-- END Grid -->

    <!-- sm Grid -->
    <h2 class="content-heading">sm Grid <small>Columns collapse at 576px</small></h2>
    <div class="row text-center">
        <div class="col-sm-3">
            <div class="block">
                <div class="block-content">
                    <p><code>col-sm-3</code></p>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="block">
                <div class="block-content">
                    <p><code>col-sm-3</code></p>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="block">
                <div class="block-content">
                    <p><code>col-sm-3</code></p>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="block">
                <div class="block-content">
                    <p><code>col-sm-3</code></p>
                </div>
            </div>
        </div>
    </div>
    <!-- END sm Grid -->

    <!-- md Grid -->
    <h2 class="content-heading">md Grid <small>Columns collapse at 768px</small></h2>
    <div class="row text-center">
        <div class="col-md-3">
            <div class="block">
                <div class="block-content">
                    <p><code>col-md-3</code></p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="block">
                <div class="block-content">
                    <p><code>col-md-3</code></p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="block">
                <div class="block-content">
                    <p><code>col-md-3</code></p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="block">
                <div class="block-content">
                    <p><code>col-md-3</code></p>
                </div>
            </div>
        </div>
    </div>
    <!-- END md Grid -->

    <!-- lg Grid -->
    <h2 class="content-heading">lg Grid <small>Columns collapse at 992px</small></h2>
    <div class="row text-center">
        <div class="col-lg-3">
            <div class="block">
                <div class="block-content">
                    <p><code>col-lg-3</code></p>
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="block">
                <div class="block-content">
                    <p><code>col-lg-3</code></p>
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="block">
                <div class="block-content">
                    <p><code>col-lg-3</code></p>
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="block">
                <div class="block-content">
                    <p><code>col-lg-3</code></p>
                </div>
            </div>
        </div>
    </div>
    <!-- END lg Grid -->

    <!-- xlg Grid -->
    <h2 class="content-heading">xl Grid <small>Columns collapse at 1200px</small></h2>
    <div class="row text-center">
        <div class="col-xl-3">
            <div class="block">
                <div class="block-content">
                    <p><code>col-xl-3</code></p>
                </div>
            </div>
        </div>
        <div class="col-xl-3">
            <div class="block">
                <div class="block-content">
                    <p><code>col-xl-3</code></p>
                </div>
            </div>
        </div>
        <div class="col-xl-3">
            <div class="block">
                <div class="block-content">
                    <p><code>col-xl-3</code></p>
                </div>
            </div>
        </div>
        <div class="col-xl-3">
            <div class="block">
                <div class="block-content">
                    <p><code>col-xl-3</code></p>
                </div>
            </div>
        </div>
    </div>
    <!-- END xlg Grid -->

    <!-- Mixed Grid -->
    <h2 class="content-heading">Mixed Grid <small>For complex layouts</small></h2>
    <div class="row text-center">
        <div class="col-sm-6 col-lg-3">
            <div class="block">
                <div class="block-content">
                    <p><code>col-md-6</code> <code>col-xl-3</code></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3">
            <div class="block">
                <div class="block-content">
                    <p><code>col-md-6</code> <code>col-xl-3</code></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3">
            <div class="block">
                <div class="block-content">
                    <p><code>col-md-6</code> <code>col-xl-3</code></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3">
            <div class="block">
                <div class="block-content">
                    <p><code>col-md-6</code> <code>col-xl-3</code></p>
                </div>
            </div>
        </div>
    </div>
    <!-- END Mixed Grid -->

    <!-- Complex Grid -->
    <h2 class="content-heading">Grid with Offsets <small>For complex layouts</small></h2>
    <div class="row text-center">
        <div class="col-md-4 offset-md-1">
            <div class="block">
                <div class="block-content">
                    <p><code>col-md-4 offset-md-1</code></p>
                </div>
            </div>
        </div>
        <div class="col-md-4 offset-md-2">
            <div class="block">
                <div class="block-content">
                    <p><code>col-md-4 offset-md-1</code></p>
                </div>
            </div>
        </div>
    </div>
    <div class="row text-center">
        <div class="col-md-4 offset-md-3">
            <div class="block">
                <div class="block-content">
                    <p><code>col-md-4 offset-md-3</code></p>
                </div>
            </div>
        </div>
    </div>
    <div class="row text-center">
        <div class="col-md-4 offset-md-6">
            <div class="block">
                <div class="block-content">
                    <p><code>col-md-4 offset-md-6</code></p>
                </div>
            </div>
        </div>
    </div>
    <div class="row text-center">
        <div class="col-md-6 offset-md-3">
            <div class="block">
                <div class="block-content">
                    <p><code>col-md-5 offset-md-3</code></p>
                </div>
            </div>
        </div>
    </div>
    <div class="row text-center">
        <div class="col-md-3 offset-md-1">
            <div class="block">
                <div class="block-content">
                    <p><code>col-md-3 offset-md-8</code></p>
                </div>
            </div>
        </div>
        <div class="col-md-3 offset-md-4">
            <div class="block">
                <div class="block-content">
                    <p><code>col-md-3 offset-md-4</code></p>
                </div>
            </div>
        </div>
    </div>
    <div class="row text-center">
        <div class="col-md-3">
            <div class="block">
                <div class="block-content">
                    <p><code>col-md-3</code></p>
                </div>
            </div>
        </div>
        <div class="col-md-3 ml-auto">
            <div class="block">
                <div class="block-content">
                    <p><code>col-md-3</code> <code>ml-auto</code></p>
                </div>
            </div>
        </div>
    </div>
    <div class="row text-center">
        <div class="col-lg-4 ml-auto">
            <div class="block">
                <div class="block-content">
                    <p><code>col-lg-4</code> <code>ml-auto</code></p>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mr-auto">
            <div class="block">
                <div class="block-content">
                    <p><code>col-lg-4</code> <code>mr-auto</code></p>
                </div>
            </div>
        </div>
    </div>
    <div class="row justify-content-center text-center">
        <div class="col-md-6">
            <div class="block">
                <div class="block-content">
                    <p><code>col-md-6</code> and <code>justify-content-center</code> in <code>row</code></p>
                </div>
            </div>
        </div>
    </div>
    <!-- END Complex Grids -->

    <!-- Small Grid Gutters -->
    <h2 class="content-heading">Small Grid Gutters <small>Useful for tiles/widgets</small></h2>
    <div class="row gutters-tiny">
        <div class="col-3">
            <div class="block">
                <div class="block-content">
                    <p>...</p>
                </div>
            </div>
            <div class="block">
                <div class="block-content">
                    <p>...</p>
                </div>
            </div>
            <div class="block">
                <div class="block-content">
                    <p>...</p>
                </div>
            </div>
        </div>
        <div class="col-3">
            <div class="block">
                <div class="block-content">
                    <p>...</p>
                </div>
            </div>
            <div class="block">
                <div class="block-content">
                    <p>...</p>
                </div>
            </div>
            <div class="block">
                <div class="block-content">
                    <p>...</p>
                </div>
            </div>
        </div>
        <div class="col-3">
            <div class="block">
                <div class="block-content">
                    <p>...</p>
                </div>
            </div>
            <div class="block">
                <div class="block-content">
                    <p>...</p>
                </div>
            </div>
            <div class="block">
                <div class="block-content">
                    <p>...</p>
                </div>
            </div>
        </div>
        <div class="col-3">
            <div class="block">
                <div class="block-content">
                    <p>...</p>
                </div>
            </div>
            <div class="block">
                <div class="block-content">
                    <p>...</p>
                </div>
            </div>
            <div class="block">
                <div class="block-content">
                    <p>...</p>
                </div>
            </div>
        </div>
    </div>
    <!-- END Small Grid Gutters -->

    <!-- Flat Grid -->
    <h2 class="content-heading">Flat Grid <small>No gutters</small></h2>
    <div class="row no-gutters">
        <div class="col-3">
            <div class="block mb-0 bg-body-dark">
                <div class="block-content">
                    <p>...</p>
                </div>
            </div>
            <div class="block mb-0">
                <div class="block-content">
                    <p>...</p>
                </div>
            </div>
            <div class="block mb-0 bg-body-dark">
                <div class="block-content">
                    <p>...</p>
                </div>
            </div>
        </div>
        <div class="col-3">
            <div class="block mb-0">
                <div class="block-content">
                    <p>...</p>
                </div>
            </div>
            <div class="block mb-0 bg-body-dark">
                <div class="block-content">
                    <p>...</p>
                </div>
            </div>
            <div class="block mb-0">
                <div class="block-content">
                    <p>...</p>
                </div>
            </div>
        </div>
        <div class="col-3">
            <div class="block mb-0 bg-body-dark">
                <div class="block-content">
                    <p>...</p>
                </div>
            </div>
            <div class="block mb-0">
                <div class="block-content">
                    <p>...</p>
                </div>
            </div>
            <div class="block mb-0 bg-body-dark">
                <div class="block-content">
                    <p>...</p>
                </div>
            </div>
        </div>
        <div class="col-3">
            <div class="block mb-0">
                <div class="block-content">
                    <p>...</p>
                </div>
            </div>
            <div class="block mb-0 bg-body-dark">
                <div class="block-content">
                    <p>...</p>
                </div>
            </div>
            <div class="block mb-0">
                <div class="block-content">
                    <p>...</p>
                </div>
            </div>
        </div>
    </div>
    <!-- END Flat Grid -->

    <!-- Blocks in Grid -->
    <h2 class="content-heading">Blocks in Grid</h2>
    <div class="row">
        <div class="col-md-6 col-xl-4">
            <div class="block">
                <div class="block-header">
                    <h3 class="block-title">Block</h3>
                    <div class="block-options">
                        <button type="button" class="btn-block-option">
                            <i class="si si-settings"></i>
                        </button>
                    </div>
                </div>
                <div class="block-content">
                    <p>Block’s content..</p>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xl-4">
            <div class="block">
                <div class="block-header">
                    <h3 class="block-title">Block</h3>
                    <div class="block-options">
                        <button type="button" class="btn-block-option">
                            <i class="si si-settings"></i>
                        </button>
                    </div>
                </div>
                <div class="block-content">
                    <p>Block’s content..</p>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xl-4">
            <div class="block">
                <div class="block-header">
                    <h3 class="block-title">Block</h3>
                    <div class="block-options">
                        <button type="button" class="btn-block-option">
                            <i class="si si-settings"></i>
                        </button>
                    </div>
                </div>
                <div class="block-content">
                    <p>Block’s content..</p>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xl-4">
            <div class="block">
                <div class="block-header">
                    <h3 class="block-title">Block</h3>
                    <div class="block-options">
                        <button type="button" class="btn-block-option">
                            <i class="si si-settings"></i>
                        </button>
                    </div>
                </div>
                <div class="block-content">
                    <p>Block’s content..</p>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xl-4">
            <div class="block">
                <div class="block-header">
                    <h3 class="block-title">Block</h3>
                    <div class="block-options">
                        <button type="button" class="btn-block-option">
                            <i class="si si-settings"></i>
                        </button>
                    </div>
                </div>
                <div class="block-content">
                    <p>Block’s content..</p>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xl-4">
            <div class="block">
                <div class="block-header">
                    <h3 class="block-title">Block</h3>
                    <div class="block-options">
                        <button type="button" class="btn-block-option">
                            <i class="si si-settings"></i>
                        </button>
                    </div>
                </div>
                <div class="block-content">
                    <p>Block’s content..</p>
                </div>
            </div>
        </div>
    </div>
    <!-- END Blocks in Grid -->

    <!-- Equal Blocks in Grid -->
    <h2 class="content-heading">Equal Blocks in Grid</h2>
    <div class="row row-deck">
        <div class="col-sm-4">
            <div class="block">
                <div class="block-header">
                    <h3 class="block-title">Block</h3>
                    <div class="block-options">
                        <button type="button" class="btn-block-option">
                            <i class="si si-settings"></i>
                        </button>
                    </div>
                </div>
                <div class="block-content">
                    <?php $one->get_text('small'); ?>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="block">
                <div class="block-header">
                    <h3 class="block-title">Block</h3>
                    <div class="block-options">
                        <button type="button" class="btn-block-option">
                            <i class="si si-settings"></i>
                        </button>
                    </div>
                </div>
                <div class="block-content">
                    <?php $one->get_text('medium'); ?>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="block">
                <div class="block-header">
                    <h3 class="block-title">Block</h3>
                    <div class="block-options">
                        <button type="button" class="btn-block-option">
                            <i class="si si-settings"></i>
                        </button>
                    </div>
                </div>
                <div class="block-content">
                    <?php $one->get_text('small'); ?>
                </div>
            </div>
        </div>
    </div>
    <!-- END Equal Blocks in Grid -->

    <!-- Paragraphs in Grid -->
    <h2 class="content-heading">Paragraphs in Grid</h2>
    <div class="block">
        <div class="block-header">
            <h3 class="block-title">Example</h3>
        </div>
        <div class="block-content">
            <div class="row items-push">
                <div class="col-md-6">
                    <h3>Flexible Grid</h3>
                    <?php $one->get_text(); ?>
                </div>
                <div class="col-md-6">
                    <h3>Many Options</h3>
                    <?php $one->get_text(); ?>
                </div>
            </div>
            <div class="row items-push">
                <div class="col-md-4">
                    <h3 class="">For all screen sizes</h3>
                    <?php $one->get_text(); ?>
                </div>
                <div class="col-md-4">
                    <h3>Easy to use</h3>
                    <?php $one->get_text(); ?>
                </div>
                <div class="col-md-4">
                    <h3>Bootstrap Grid</h3>
                    <?php $one->get_text(); ?>
                </div>
            </div>
            <div class="row items-push">
                <div class="col-md-4">
                    <h3>12 Columns</h3>
                    <?php $one->get_text(); ?>
                </div>
                <div class="col-md-8">
                    <h3>Multiple Layouts</h3>
                    <?php $one->get_text('large'); ?>
                </div>
            </div>
            <div class="row items-push">
                <div class="col-md-8">
                    <h3>Mobile, Tablets and Desktop</h3>
                    <?php $one->get_text('large'); ?>
                </div>
                <div class="col-md-4">
                    <h3>Mixed Grid</h3>
                    <?php $one->get_text(); ?>
                </div>
            </div>
        </div>
    </div>
    <!-- END Paragraphs in Grid -->

    <!-- Responsive Utility Classes -->
    <div id="grid-rutil" class="block">
        <div class="block-header">
            <h3 class="block-title">Responsive Utility Classes</h3>
        </div>
        <div class="block-content block-content-full">
            <p>For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query.</p>
            <div class="table-responsive">
                <table class="table table-bordered table-hover text-center mb-0">
                    <thead>
                        <tr>
                            <th style="min-width: 100px;"></th>
                            <th class="text-center">
                                Extra small devices<br>
                                <small class="font-w400 text-muted">Portrait phones (&lt;576px)</small>
                            </th>
                            <th class="text-center">
                                Small devices<br>
                                <small class="font-w400 text-muted">Landscape phones (&ge;576px - &lt;768px)</small>
                            </th>
                            <th class="text-center">
                                Medium devices<br>
                                <small class="font-w400 text-muted">Tablets (&ge;768px - &lt;992px)</small>
                            </th>
                            <th class="text-center">
                                Large devices<br>
                                <small class="font-w400 text-muted">Desktops (&ge;992px - &lt;1200px)</small>
                            </th>
                            <th class="text-center">
                                Extra large devices<br>
                                <small class="font-w400 text-muted">Desktops (&ge;1200px)</small>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="6">
                                Available options for <code>*</code>: <code>inline</code> <code>inline-block</code> <code>block</code> <code>table</code> <code>table-cell</code> <code>flex</code> <code>inline-flex</code>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <code>.d-none</code> <code>.d-sm-*</code>
                            </td>
                            <td><i class="si si-close text-danger"></i></td>
                            <td><i class="si si-check text-success"></i></td>
                            <td><i class="si si-check text-success"></i></td>
                            <td><i class="si si-check text-success"></i></td>
                            <td><i class="si si-check text-success"></i></td>
                        </tr>
                        <tr>
                            <td><code>.d-none</code> <code>.d-md-*</code></td>
                            <td><i class="si si-close text-danger"></i></td>
                            <td><i class="si si-close text-danger"></i></td>
                            <td><i class="si si-check text-success"></i></td>
                            <td><i class="si si-check text-success"></i></td>
                            <td><i class="si si-check text-success"></i></td>
                        </tr>
                        <tr>
                            <td><code>.d-none</code> <code>.d-lg-*</code></td>
                            <td><i class="si si-close text-danger"></i></td>
                            <td><i class="si si-close text-danger"></i></td>
                            <td><i class="si si-close text-danger"></i></td>
                            <td><i class="si si-check text-success"></i></td>
                            <td><i class="si si-check text-success"></i></td>
                        </tr>
                        <tr>
                            <td><code>.d-none</code> <code>.d-xl-*</code></td>
                            <td><i class="si si-close text-danger"></i></td>
                            <td><i class="si si-close text-danger"></i></td>
                            <td><i class="si si-close text-danger"></i></td>
                            <td><i class="si si-close text-danger"></i></td>
                            <td><i class="si si-check text-success"></i></td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr>
                            <td><code>.d-none</code></td>
                            <td><i class="si si-close text-danger"></i></td>
                            <td><i class="si si-close text-danger"></i></td>
                            <td><i class="si si-close text-danger"></i></td>
                            <td><i class="si si-close text-danger"></i></td>
                            <td><i class="si si-close text-danger"></i></td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr>
                            <td><code>.d-sm-none</code></td>
                            <td><i class="si si-check text-success"></i></td>
                            <td><i class="si si-close text-danger"></i></td>
                            <td><i class="si si-close text-danger"></i></td>
                            <td><i class="si si-close text-danger"></i></td>
                            <td><i class="si si-close text-danger"></i></td>
                        </tr>
                        <tr>
                            <td><code>.d-md-none</code></td>
                            <td><i class="si si-check text-success"></i></td>
                            <td><i class="si si-check text-success"></i></td>
                            <td><i class="si si-close text-danger"></i></td>
                            <td><i class="si si-close text-danger"></i></td>
                            <td><i class="si si-close text-danger"></i></td>
                        </tr>
                        <tr>
                            <td><code>.d-lg-none</code></td>
                            <td><i class="si si-check text-success"></i></td>
                            <td><i class="si si-check text-success"></i></td>
                            <td><i class="si si-check text-success"></i></td>
                            <td><i class="si si-close text-danger"></i></td>
                            <td><i class="si si-close text-danger"></i></td>
                        </tr>
                        <tr>
                            <td><code>.d-xl-none</code></td>
                            <td><i class="si si-check text-success"></i></td>
                            <td><i class="si si-check text-success"></i></td>
                            <td><i class="si si-check text-success"></i></td>
                            <td><i class="si si-check text-success"></i></td>
                            <td><i class="si si-close text-danger"></i></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- END Responsive Utility Classes -->
</div>
<!-- END Page Content -->

<?php require 'inc/_global/views/page_end.php'; ?>
<?php require 'inc/_global/views/footer_start.php'; ?>
<?php require 'inc/_global/views/footer_end.php'; ?>
