<?php include('partials/app-html.php'); ?>

<head>
    <?php $pageTitle = "Spacing";
    include('partials/app-meta-title.php') ?>

    <?php include('partials/app-head-css.php'); ?>
</head>

<body>

    <div class="app-wrap">

        <?php include('partials/app-header.php'); ?>

        <?php include('partials/app-sidebar.php'); ?>

        <main class="app-body">
            <div class="app-content">

                <div class="content-wrapper">

                    <?php $pageTitle = "Spacing"; $pageSubTitle1 = "Design"; $pageSubTitle2 = "System Utilities"; $pageSubText = "Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element\u2019s appearance."; include('partials/app-pagetitle.php'); ?>

                    <div class="main-content">

                        <div class="info-container">
                            <p>Assign responsive-friendly <code>margin</code> or <code>padding</code> values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from <code>.25rem</code> to <code>3rem</code>.</p>
                            <p class="mb-0">
                                We have further added quick margin and padding options for by using gutter space variable <code>.m-g</code>, margin bottom gutter <code>.mb-g</code>. Padding gutter can be adding by using <code>.p-g</code> modifier. The <code>*-g</code> will change based on the gutter variable.
                            </p>
                        </div>
                        <div class="row">
                            <div class="col-xl-6">
                                <div id="panel-1" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Default <span class="fw-300"><i>Panel</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">

                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                <p>Spacing utilities that apply to all breakpoints, from <code>xs</code> to <code>xxl</code>, have no breakpoint abbreviation in them. This is because those classes are applied from <code>min-width: 0</code> and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.</p>
                                                <p>The classes are named using the format <code>{property}{sides}-{size}</code> for <code>xs</code> and <code>{property}{sides}-{breakpoint}-{size}</code> for <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, and <code>xxl</code>.</p>
                                            </div>
                                            <p>Where <em>property</em> is one of:</p>
                                            <ul class="list-spaced">
                                                <li><code>t</code> - for classes that set <code>margin-top</code> or <code>padding-top</code></li>
                                                <li><code>b</code> - for classes that set <code>margin-bottom</code> or <code>padding-bottom</code></li>
                                                <li><code>l</code> - for classes that set <code>margin-start</code> or <code>padding-start</code></li>
                                                <li><code>r</code> - for classes that set <code>margin-end</code> or <code>padding-end</code></li>
                                                <li><code>x</code> - for classes that set both <code>*-left</code> and <code>*-right</code></li>
                                                <li><code>y</code> - for classes that set both <code>*-top</code> and <code>*-bottom</code></li>
                                                <li>blank - for classes that set a <code>margin</code> or <code>padding</code> on all 4 sides of the element</li>
                                            </ul>
                                            <p>Where <em>size</em> is one of:</p>
                                            <ul class="list-spaced">
                                                <li><code>0</code> - for classes that eliminate the <code>margin</code> or <code>padding</code> by setting it to <code>0</code></li>
                                                <li><code>1</code> - (by default) for classes that set the <code>margin</code> or <code>padding</code> to <code>$spacer * .25</code></li>
                                                <li><code>2</code> - (by default) for classes that set the <code>margin</code> or <code>padding</code> to <code>$spacer * .5</code></li>
                                                <li><code>3</code> - (by default) for classes that set the <code>margin</code> or <code>padding</code> to <code>$spacer</code></li>
                                                <li><code>4</code> - (by default) for classes that set the <code>margin</code> or <code>padding</code> to <code>$spacer * 1.5</code></li>
                                                <li><code>5</code> - (by default) for classes that set the <code>margin</code> or <code>padding</code> to <code>$spacer * 2</code></li>
                                                <li><code>auto</code> - for classes that set the <code>margin</code> to auto</li>
                                            </ul>
                                            <p>
                                                Example padding:
                                            </p>
                                            <div class="demo">
                                                <div class="p-2 p-sm-3 p-md-4 p-lg-5 p-xl-6 p-xxl-7 bg-danger-50 pattern-2">
                                                    <div class="bg-success-600 pattern-1 ps-2">.p-2 .p-sm-3 .p-md-4 .p-lg-5 .p-xl-6 .p-xxl-7</div>
                                                </div>
                                                <div class="p-1 p-sm-2 p-md-3 p-lg-4 p-xl-5 p-xxl-6 bg-danger-50 pattern-2">
                                                    <div class="bg-success-600 pattern-1 ps-2">.p-1 .p-sm-2 .p-md-3 .p-lg-4 .p-xl-5 .p-xxl-6</div>
                                                </div>
                                                <div class="p-0 p-sm-1 p-md-2 p-lg-3 p-xl-4 p-xxl-5 bg-danger-50 pattern-2">
                                                    <div class="bg-success-600 pattern-1 ps-2">.p-0 .p-sm-1 .p-md-2 .p-lg-3 .p-xl-4 .p-xxl-5</div>
                                                </div>
                                                <div class="p-3 p-sm-0 p-md-1 p-lg-2 p-xl-3 p-xxl-4 bg-danger-50 pattern-2">
                                                    <div class="bg-success-600 pattern-1 ps-2">.p-3 .p-sm-0 .p-md-1 .p-lg-2 .p-xl-3 .p-xxl-4</div>
                                                </div>
                                                <div class="p-4 p-sm-4 p-md-0 p-lg-1 p-xl-2 p-xxl-3 bg-danger-50 pattern-2">
                                                    <div class="bg-success-600 pattern-1 ps-2">.p-4 .p-sm-4 .p-md-0 .p-lg-1 .p-xl-2 .p-xxl-3</div>
                                                </div>
                                                <div class="p-5 p-sm-6 p-md-3 p-lg-0 p-xl-1 p-xxl-2 bg-danger-50 pattern-2">
                                                    <div class="bg-success-600 pattern-1 ps-2">.p-5 .p-sm-6 .p-md-3 .p-lg-0 .p-xl-1 .p-xxl-2</div>
                                                </div>
                                                <div class="p-6 p-sm-5 p-md-5 p-lg-6 p-xl-0 p-xxl-1 bg-danger-50 pattern-2">
                                                    <div class="bg-success-600 pattern-1 ps-2">.p-6 .p-sm-5 .p-md-5 .p-lg-6 .p-xl-0 .p-xxl-1</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-6">
                                <div id="panel-2a" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2 data-filter-tags="child hover">
                                            Horizontal <span class="fw-300"><i>centering</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">

                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                <p>Additionally, Bootstrap also includes an <code>.mx-auto</code> class for horizontally centering fixed-width block level content—that is, content that has <code>display: block</code> and a <code>width</code> set—by setting the horizontal margins to <code>auto</code>.</p>
                                            </div>
                                            <div class="w-100 bg-danger-50 pattern-2 p-3">
                                                <div class="mx-auto p-2 bg-info-500 pattern-1 shadow" style="width:200px">
                                                    Centered element
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="panel-3" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2 data-filter-tags="child hover">
                                            Negative <span class="fw-300"><i>margin</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">

                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                The syntax is nearly the same as the default, positive margin utilities, but with the addition of <code>n</code> before the requested size.
                                            </div>
                                            <p>
                                                Here’s an example of customizing the Bootstrap grid at the medium (<code>md</code>) breakpoint and above. We’ve increased the <code>.col</code> padding with <code>.px-md-5</code> and then counteracted that with <code>.mx-md-n5</code> on the parent <code>.row</code>.
                                            </p>
                                            <div class="row mx-md-n5">
                                                <div class="col px-md-5">
                                                    <div class="p-3 border bg-light">Custom column padding</div>
                                                </div>
                                                <div class="col px-md-5">
                                                    <div class="p-3 border bg-light">Custom column padding</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="panel-2" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2 data-filter-tags="child hover">
                                            Margin <span class="fw-300"><i>examples</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">

                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Margin specific viewports example
                                                <div class="row mt-1">
                                                    <div class="col-12 col-sm-6 col-md-6 col-lg-2 col-lg-2">
                                                        *-xs-* &lt;576px
                                                    </div>
                                                    <div class="col-12 col-sm-6 col-md-6 col-lg-2 col-lg-2">
                                                        *-sm-* ≥576px
                                                    </div>
                                                    <div class="col-12 col-sm-6 col-md-6 col-lg-2 col-lg-2">
                                                        *-md-* ≥768px
                                                    </div>
                                                    <div class="col-12 col-sm-6 col-md-6 col-lg-2 col-lg-2">
                                                        *-lg-* ≥992px
                                                    </div>
                                                    <div class="col-12 col-sm-6 col-md-6 col-lg-2 col-lg-2">
                                                        *-xl-* ≥1200px
                                                    </div>
                                                    <div class="col-12 col-sm-6 col-md-6 col-lg-2 col-lg-2">
                                                        *-xxl-* ≥1400px
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="demo">
                                                <div class="row bg-danger-50 pattern-2">
                                                    <div class="col bg-info text-white ms-1 ms-sm-2 ms-md-3 ms-lg-4 ms-xl-5 ms-xxl-6 pattern-1">
                                                        .ms-1 .ms-sm-2 .ms-md-3 .ms-lg-4 .ms-xl-5 .ms-xxl-6
                                                    </div>
                                                </div>
                                                <div class="row bg-danger-50 pattern-2">
                                                    <div class="col bg-info text-white mx-xs-1 mx-sm-2 mx-md-3 mx-lg-4 mx-xl-5 mx-xxl-6 pattern-1">
                                                        .mx-1 .mx-sm-2 .mx-md-3 .mx-lg-4 .mx-xl-5 .mx-xxl-6
                                                    </div>
                                                </div>
                                                <div class="row bg-danger-50 pattern-2">
                                                    <div class="col bg-info text-white my-1 my-sm-2 my-md-3 my-lg-4 my-xl-5 my-xxl-6 pattern-1">
                                                        .my-1 .my-sm-2 .my-md-3 .my-lg-4 .my-xl-5 .my-xxl-6
                                                    </div>
                                                </div>
                                                <div class="row bg-danger-50 pattern-2">
                                                    <div class="col bg-info text-white m-1 m-sm-2 m-md-3 m-lg-4 m-xl-5 m-xxl-6 pattern-1">
                                                        .m-1 .m-sm-2 .m-md-3 .m-lg-4 .m-xl-5 .m-xxl-6
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>


                </div>

            </div>

            <?php include('partials/app-footer.php'); ?>

        </main>

        <?php include('partials/app-drawer.php'); ?>

        <?php include('partials/app-settings.php'); ?>

    </div>

    <?php include('partials/app-scripts.php'); ?>

</body>

</html>