
<!-- PAGE-INDEX-STARTS -->

<div class="breadcrumbs">
    <div class="breadcrumbs-inner">
        <div class="row m-0">
            <div class="col-sm-4">
                <div class="page-header float-left">
                    <div class="page-title">
                        <h1>Dashboard</h1>
                    </div>
                </div>
            </div>
            <div class="col-sm-8">
                <div class="page-header float-right">
                    <div class="page-title">
                        <ol class="breadcrumb text-right">
                            <li><a href="#">Dashboard</a></li>
                            <li><a href="#">UI Elements</a></li>
                            <li class="active">Grids</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- PAGE-INDEX-ENDS -->

<!-- PAGE-CONTENT-STARTS -->

<div class="content">
    <div class="animated fadeIn">

        <h5 class="heading-title mb-1 text-secondary">Fixed Grid</h5>
        <div class="row">
            <div class="col">
                <section class="card">
                    <div class="card-body text-secondary">.col</div>
                </section>
            </div>
            <div class="col">
                <section class="card">
                    <div class="card-body text-secondary">.col</div>
                </section>
            </div>
            <div class="col">
                <section class="card">
                    <div class="card-body text-secondary">.col</div>
                </section>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <section class="card">
                    <div class="card-body text-secondary">.col</div>
                </section>
            </div>
            <div class="col">
                <section class="card">
                    <div class="card-body text-secondary">.col</div>
                </section>
            </div>
            <div class="col">
                <section class="card">
                    <div class="card-body text-secondary">.col</div>
                </section>
            </div>
            <div class="col">
                <section class="card">
                    <div class="card-body text-secondary">.col</div>
                </section>
            </div>
            <div class="col">
                <section class="card">
                    <div class="card-body text-secondary">.col</div>
                </section>
            </div>
            <div class="col">
                <section class="card">
                    <div class="card-body text-secondary">.col</div>
                </section>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <section class="card">
                    <div class="card-body text-secondary">.col</div>
                </section>
            </div>
            <div class="col">
                <section class="card">
                    <div class="card-body text-secondary">.col</div>
                </section>
            </div>
            <div class="col">
                <section class="card">
                    <div class="card-body text-secondary">.col</div>
                </section>
            </div>
            <div class="col">
                <section class="card">
                    <div class="card-body text-secondary">.col</div>
                </section>
            </div>
            <div class="col">
                <section class="card">
                    <div class="card-body text-secondary">.col</div>
                </section>
            </div>
            <div class="col">
                <section class="card">
                    <div class="card-body text-secondary">.col</div>
                </section>
            </div>
            <div class="col">
                <section class="card">
                    <div class="card-body text-secondary">.col</div>
                </section>
            </div>
            <div class="col">
                <section class="card">
                    <div class="card-body text-secondary">.col</div>
                </section>
            </div>
            <div class="col">
                <section class="card">
                    <div class="card-body text-secondary">.col</div>
                </section>
            </div>
            <div class="col">
                <section class="card">
                    <div class="card-body text-secondary">.col</div>
                </section>
            </div>
            <div class="col">
                <section class="card">
                    <div class="card-body text-secondary">.col</div>
                </section>
            </div>
            <div class="col">
                <section class="card">
                    <div class="card-body text-secondary">.col</div>
                </section>
            </div>
        </div>

        <h5 class="heading-title mb-1 mt-4 text-secondary">Desktop Grid</h5>
        <div class="row">
            <div class="col col-lg-12">
                <section class="card">
                    <div class="card-body text-secondary">col-lg-12</div>
                </section>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-6">
                <section class="card">
                    <div class="card-body text-secondary">col-lg-6</div>
                </section>
            </div>
            <div class="col-lg-6 ">
                <section class="card">
                    <div class="card-body text-secondary">col-lg-6</div>
                </section>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-4">
                <section class="card">
                    <div class="card-body text-secondary">col-lg-4</div>
                </section>
            </div>
            <div class="col-lg-4">
                <section class="card">
                    <div class="card-body text-secondary">col-lg-4</div>
                </section>
            </div>
            <div class="col-lg-4">
                <section class="card">
                    <div class="card-body text-secondary">col-lg-4</div>
                </section>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-3">
                <section class="card">
                    <div class="card-body text-secondary">col-lg-3</div>
                </section>
            </div>
            <div class="col-lg-3">
                <section class="card">
                    <div class="card-body text-secondary">col-lg-3</div>
                </section>
            </div>
            <div class="col-lg-3">
                <section class="card">
                    <div class="card-body text-secondary">col-lg-3</div>
                </section>
            </div>
            <div class="col-lg-3">
                <section class="card">
                    <div class="card-body text-secondary">col-lg-3</div>
                </section>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-2">
                <section class="card">
                    <div class="card-body text-secondary">col-lg-2</div>
                </section>
            </div>
            <div class="col-lg-2">
                <section class="card">
                    <div class="card-body text-secondary">col-lg-2</div>
                </section>
            </div>
            <div class="col-lg-2">
                <section class="card">
                    <div class="card-body text-secondary">col-lg-2</div>
                </section>
            </div>
            <div class="col-lg-2">
                <section class="card">
                    <div class="card-body text-secondary">col-lg-2</div>
                </section>
            </div>
            <div class="col-lg-2">
                <section class="card">
                    <div class="card-body text-secondary">col-lg-2</div>
                </section>
            </div>
            <div class="col-lg-2">
                <section class="card">
                    <div class="card-body text-secondary">col-lg-2</div>
                </section>
            </div>
        </div>

        <h4 class="heading-title mt-5 mb-3 text-secondary">Mobile, Tablet, and Desktop</h4>

        <div class="row">
            <div class="col-2">
                <section class="card">
                    <div class="card-body text-secondary">col-2</div>
                </section>
            </div>
            <div class="col-2">
                <section class="card">
                    <div class="card-body text-secondary">col-2</div>
                </section>
            </div>
            <div class="col-lg-8">
                <section class="card">
                    <div class="card-body text-secondary">col-lg-8</div>
                </section>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-3">
                <section class="card">
                    <div class="card-body text-secondary">col-sm-3</div>
                </section>
            </div>
            <div class="col-sm-3">
                <section class="card">
                    <div class="card-body text-secondary">col-sm-3</div>
                </section>
            </div>
            <div class="col-lg-6">
                <section class="card">
                    <div class="card-body text-secondary">col-lg-6</div>
                </section>
            </div>
        </div>

        <div class="row">
            <div class="col-md-4">
                <section class="card">
                    <div class="card-body text-secondary">col-md-4</div>
                </section>
            </div>
            <div class="col-md-4">
                <section class="card">
                    <div class="card-body text-secondary">col-md-4</div>
                </section>
            </div>
            <div class="col-lg-4">
                <section class="card">
                    <div class="card-body text-secondary">col-lg-4</div>
                </section>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <section class="card">
                    <div class="card-body text-secondary">col-sm-6</div>
                </section>
            </div>
            <div class="col-sm-6">
                <section class="card">
                    <div class="card-body text-secondary">col-sm-6</div>
                </section>
            </div>
        </div>

        <h5 class="heading-title mb-1 mt-4 text-secondary">Offset Grid</h5>

        <div class="row">
            <div class="col-md-6 offset-md-6 col-sm-6 ml-auto">
                <section class="card">
                    <div class="card-body text-secondary">col-md-6 offset-md-6 col-sm-6 </div>
                </section>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 offset-md-3 mr-auto ml-auto">
                <section class="card">
                    <div class="card-body text-secondary">.col-md-6 .offset-md-3</div>
                </section>
            </div>
        </div>

        <div class="row">
            <div class="col-md-4">
                <section class="card">
                    <div class="card-body text-secondary"> .col-md-4 </div>
                </section>
            </div>
            <div class="col-md-4 ml-auto">
                <section class="card">
                    <div class="card-body text-secondary">.col-md-4 .ml-auto</div>
                </section>
            </div>
        </div>
    </div>
</div>

<!-- PAGE-CONTENT-ENDS -->