i2p-styleguide/_includes/visuals/grid.html

<div id="grid" class="page-header mb-4 mt-5">
    <h2>Grid</h2>
    <p class="text-muted">Our main used grid compositions are outlined here. Use them to generate one column or various columns layouts.</p>
</div>
<div class="container bg-light p-5">
    <div class="row mb-1">
        <div class="col-12">
            <p class="background-primary p-3 text-white small">
                12
            </p>
        </div>
    </div>
    <div class="row mb-1">
        <div class="col-4">
            <p class="background-primary p-3 text-white small">
                4
            </p>
        </div>
        <div class="col-8">
            <p class="background-primary p-3 text-white small">
                8
            </p>
        </div>
    </div>
    <div class="row mb-1">
        <div class="col-3">
            <p class="background-primary p-3 text-white small">
                3
            </p>
        </div>
        <div class="col-9">
            <p class="background-primary p-3 text-white small">
                9
            </p>
        </div>
    </div>
    <div class="row mb-1">
        <div class="col-2">
            <p class="background-primary p-3 text-white small">
                2
            </p>
        </div>
        <div class="col-2">
            <p class="background-primary p-3 text-white small">
                2
            </p>
        </div>
        <div class="col-2">
            <p class="background-primary p-3 text-white small">
                2
            </p>
        </div>
        <div class="col-2">
            <p class="background-primary p-3 text-white small">
                2
            </p>
        </div>
        <div class="col-2">
            <p class="background-primary p-3 text-white small">
                2
            </p>
        </div>
        <div class="col-2">
            <p class="background-primary p-3 text-white small">
                2
            </p>
        </div>
    </div>
    <div class="row mb-1">
        <div class="col-3">
            <p class="background-primary p-3 text-white small">
                3
            </p>
        </div>
        <div class="col-3">
            <p class="background-primary p-3 text-white small">
                3
            </p>
        </div>
        <div class="col-3">
            <p class="background-primary p-3 text-white small">
                3
            </p>
        </div>
        <div class="col-3">
            <p class="background-primary p-3 text-white small">
                3
            </p>
        </div>
    </div>
    <div class="row mb-1">
        <div class="col-4">
            <p class="background-primary p-3 text-white small">
                4
            </p>
        </div>
        <div class="col-4">
            <p class="background-primary p-3 text-white small">
                4
            </p>
        </div>
        <div class="col-4">
            <p class="background-primary p-3 text-white small">
                4
            </p>
        </div>
    </div>
    <div class="row mb-1">
        <div class="col-6">
            <p class="background-primary p-3 text-white small">
                6
            </p>
        </div>
        <div class="col-6">
            <p class="background-primary p-3 text-white small">
                6
            </p>
        </div>
    </div>
    <div class="row mb-1">
        <div class="col-8 offset-2">
            <p class="background-primary p-3 text-white small">
                8
            </p>
        </div>
    </div>
    <div class="row mb-1">
        <div class="col-6 offset-3">
            <p class="background-primary p-3 text-white small">
                6
            </p>
        </div>
    </div>
</div>