PatternFlyElements

    Grid

    Pure Grid

    Item
    Item
    Item
    Item
    Item

    Code

    <div class="pfe-l-grid pfe-m-gutters pfe-m-all-6-col pfe-m-all-4-col-on-md pfe-m-all-3-col-on-lg">
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    </div>

    Bootstrap-style Columns

    Default Item
    pfe-m-2-col
    pfe-m-10-col
    pfe-m-4-col
    pfe-m-4-col
    pfe-m-4-col
    pfe-m-6-col pfe-m-3-col-on-md
    pfe-m-6-col pfe-m-3-col-on-md pfe-m-startat-7-col-on-md
    pfe-m-6-col pfe-m-3-col-on-md

    Code

    <div class="pfe-l-grid pfe-m-gutters">
    <div class="pfe-l-grid__item">Default Item</div>
    <div class="pfe-l-grid__item pfe-m-2-col"><code>pfe-m-2-col</code></div>
    <div class="pfe-l-grid__item pfe-m-10-col"><code>pfe-m-10-col</code></div>
    <div class="pfe-l-grid__item pfe-m-4-col"><code>pfe-m-4-col</code></div>
    <div class="pfe-l-grid__item pfe-m-4-col"><code>pfe-m-4-col</code></div>
    <div class="pfe-l-grid__item pfe-m-4-col"><code>pfe-m-4-col</code></div>
    <div class="pfe-l-grid__item pfe-m-6-col pfe-m-3-col-on-md"><code>pfe-m-6-col pfe-m-3-col-on-md</code></div>
    <div class="pfe-l-grid__item pfe-m-6-col pfe-m-3-col-on-md pfe-m-startat-7-col-on-md"><code>pfe-m-6-col pfe-m-3-col-on-md pfe-m-startat-7-col-on-md</code></div>
    <div class="pfe-l-grid__item pfe-m-6-col pfe-m-3-col-on-md"><code>pfe-m-6-col pfe-m-3-col-on-md</code></div>
    </div>