5.1 Card grid

A grid of cards of varying sizes. This is to demonstrate the grid and the way we can use breakpoints and columns to create a responsive site.

If any of your elements in the grid are not full width, you should add the class col-grid to the col- elements to ensure they are all the same height as each other.

List of example pages
<ul class="grid">
    <li class="col-12 col-lg-6 col-grid">
        <div class="card-body">
            Half width above the lg breakpoint, full width below.
        </div>
    </li>
    <li class="col-12 col-lg-6 col-grid">
        <div class="card-body">
            Half width above the lg breakpoint, full width below.
        </div>
    </li>
    <li class="col-12">
        <div class="card-body">
            Always full width
        </div>
    </li>
    <li class="col-xs-6 col-grid">
        <div class="card-body">
            Half width above the xs breakpoint
        </div>
    </li>
    <li class="col-xs-6 col-grid">
        <div class="card-body">
            Half width above the xs breakpoint
        </div>
    </li>
    <li class="col-sm-6 col-grid">
        <div class="card-body">
            Half width above the sm breakpoint
        </div>
    </li>
    <li class="col-sm-6 col-grid">
        <div class="card-body">
            Half width above the sm breakpoint
        </div>
    </li>
    <li class="col-xs-4 col-grid">
        <div class="card-body">
            1 third width above the xs breakpoint
        </div>
    </li>
    <li class="col-xs-8 col-grid">
        <div class="card-body">
            2 thirds width above the xs breakpoint
        </div>
    </li>
    <li class="col-xs-8 col-grid">
        <div class="card-body">
            2 thirds width above the xs breakpoint
        </div>
    </li>
    <li class="col-xs-4 col-grid">
        <div class="card-body">
            1 third width above the xs breakpoint
        </div>
    </li>
</ul>