default grid
bzg_c m3
bzg_c m3
bzg_c m3
bzg_c m3
bzg_c m4
bzg_c m4
bzg_c m4
<div class="bzg">
<div class="bzg_c" data-col="m3"><div class="text-center bg-primary text-white">bzg_c m3</div></div>
<div class="bzg_c" data-col="m3"><div class="text-center bg-primary text-white">bzg_c m3</div></div>
<div class="bzg_c" data-col="m3"><div class="text-center bg-primary text-white">bzg_c m3</div></div>
<div class="bzg_c" data-col="m3"><div class="text-center bg-primary text-white">bzg_c m3</div></div>
</div>
<div class="bzg">
<div class="bzg_c" data-col="m4"><div class="text-center bg-primary text-white">bzg_c m4</div></div>
<div class="bzg_c" data-col="m4"><div class="text-center bg-primary text-white">bzg_c m4</div></div>
<div class="bzg_c" data-col="m4"><div class="text-center bg-primary text-white">bzg_c m4</div></div>
</div>no-gutter grid
bzg_c m1
bzg_c m1
bzg_c m1
bzg_c m1
bzg_c m1
bzg_c m1
bzg_c m1
bzg_c m1
bzg_c m1
bzg_c m1
bzg_c m1
bzg_c m1
bzg_c m2
bzg_c m2
bzg_c m2
bzg_c m2
bzg_c m2
bzg_c m2
bzg_c m3
bzg_c m3
bzg_c m3
bzg_c m3
bzg_c m4
bzg_c m4
bzg_c m4
bzg_c m6
bzg_c m6
bzg_c m7
bzg_c m5
bzg_c m12
<div class="bzg bzg--no-gutter">
<div class="bzg_c" data-col="m1"><div class="text-center bg-primary text-white">bzg_c m1</div></div>
<div class="bzg_c" data-col="m1"><div class="text-center bg-primary text-white">bzg_c m1</div></div>
<div class="bzg_c" data-col="m1"><div class="text-center bg-primary text-white">bzg_c m1</div></div>
<div class="bzg_c" data-col="m1"><div class="text-center bg-primary text-white">bzg_c m1</div></div>
<div class="bzg_c" data-col="m1"><div class="text-center bg-primary text-white">bzg_c m1</div></div>
<div class="bzg_c" data-col="m1"><div class="text-center bg-primary text-white">bzg_c m1</div></div>
<div class="bzg_c" data-col="m1"><div class="text-center bg-primary text-white">bzg_c m1</div></div>
<div class="bzg_c" data-col="m1"><div class="text-center bg-primary text-white">bzg_c m1</div></div>
<div class="bzg_c" data-col="m1"><div class="text-center bg-primary text-white">bzg_c m1</div></div>
<div class="bzg_c" data-col="m1"><div class="text-center bg-primary text-white">bzg_c m1</div></div>
<div class="bzg_c" data-col="m1"><div class="text-center bg-primary text-white">bzg_c m1</div></div>
<div class="bzg_c" data-col="m1"><div class="text-center bg-primary text-white">bzg_c m1</div></div>
</div>
<div class="bzg bzg--no-gutter">
<div class="bzg_c" data-col="m2"><div class="text-center bg-primary text-white">bzg_c m2</div></div>
<div class="bzg_c" data-col="m2"><div class="text-center bg-primary text-white">bzg_c m2</div></div>
<div class="bzg_c" data-col="m2"><div class="text-center bg-primary text-white">bzg_c m2</div></div>
<div class="bzg_c" data-col="m2"><div class="text-center bg-primary text-white">bzg_c m2</div></div>
<div class="bzg_c" data-col="m2"><div class="text-center bg-primary text-white">bzg_c m2</div></div>
<div class="bzg_c" data-col="m2"><div class="text-center bg-primary text-white">bzg_c m2</div></div>
</div>
<div class="bzg bzg--no-gutter">
<div class="bzg_c" data-col="m3"><div class="text-center bg-primary text-white">bzg_c m3</div></div>
<div class="bzg_c" data-col="m3"><div class="text-center bg-primary text-white">bzg_c m3</div></div>
<div class="bzg_c" data-col="m3"><div class="text-center bg-primary text-white">bzg_c m3</div></div>
<div class="bzg_c" data-col="m3"><div class="text-center bg-primary text-white">bzg_c m3</div></div>
</div>
<div class="bzg bzg--no-gutter">
<div class="bzg_c" data-col="m4"><div class="text-center bg-primary text-white">bzg_c m4</div></div>
<div class="bzg_c" data-col="m4"><div class="text-center bg-primary text-white">bzg_c m4</div></div>
<div class="bzg_c" data-col="m4"><div class="text-center bg-primary text-white">bzg_c m4</div></div>
</div>
<div class="bzg bzg--no-gutter">
<div class="bzg_c" data-col="m6"><div class="text-center bg-primary text-white">bzg_c m6</div></div>
<div class="bzg_c" data-col="m6"><div class="text-center bg-primary text-white">bzg_c m6</div></div>
</div>
<div class="bzg bzg--no-gutter">
<div class="bzg_c" data-col="m7"><div class="text-center bg-primary text-white">bzg_c m7</div></div>
<div class="bzg_c" data-col="m5"><div class="text-center bg-primary text-white">bzg_c m5</div></div>
</div>
<div class="bzg bzg--no-gutter">
<div class="bzg_c" data-col="m12"><div class="text-center bg-primary text-white">bzg_c m12</div></div>
</div>grid with offset
bzg_c m2
bzg_c m5 offset=m5
bzg_c m3 offset=m3
bzg_c m3 offset=m3
bzg_c m6 offset=m3
<div class="bzg bzg--no-gutter">
<div class="bzg_c" data-col="m2"><div class="text-center bg-primary text-white">bzg_c m2</div></div>
<div class="bzg_c" data-col="m5" data-offset="m5"><div class="text-center bg-primary text-white">bzg_c m5 offset=m5</div></div>
</div>
<div class="bzg bzg--no-gutter">
<div class="bzg_c" data-col="m3" data-offset="m3"><div class="text-center bg-primary text-white">bzg_c m3 offset=m3</div></div>
<div class="bzg_c" data-col="m3" data-offset="m3"><div class="text-center bg-primary text-white">bzg_c m3 offset=m3</div></div>
</div>
<div class="bzg bzg--no-gutter">
<div class="bzg_c" data-col="m6" data-offset="m3"><div class="text-center bg-primary text-white">bzg_c m6 offset=m3</div></div>
</div>responsive grid
bzg_c s12,m9,l6
bzg_c s6,m3,l6
<div class="bzg bzg--no-gutter">
<div class="bzg_c" data-col="s12,m9,l6"><div class="text-center bg-primary text-white">bzg_c s12,m9,l6</div></div>
<div class="bzg_c" data-col="s6,m3,l6"><div class="text-center bg-primary text-white">bzg_c s6,m3,l6</div></div>
</div>