Grid System
Grid System
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-3
.col-md-3
.col-md-3
.col-md-3
.col-md-4
.col-md-4
.col-md-4
.col-md-5
.col-md-5
.col-md-2
.col-md-6
.col-md-6
.col-md-1
.col-md-11
.col-md-2
.col-md-10
.col-md-3
.col-md-9
.col-md-4
.col-md-8
.col-md-5
.col-md-7
<div class="row">
<div class="col-md-1 bg-light border py-2 mb-3 text-center">.col-md-1</div>
<div class="col-md-1 bg-light border py-2 mb-3 text-center">.col-md-1</div>
<div class="col-md-1 bg-light border py-2 mb-3 text-center">.col-md-1</div>
<div class="col-md-1 bg-light border py-2 mb-3 text-center">.col-md-1</div>
<div class="col-md-1 bg-light border py-2 mb-3 text-center">.col-md-1</div>
<div class="col-md-1 bg-light border py-2 mb-3 text-center">.col-md-1</div>
<div class="col-md-1 bg-light border py-2 mb-3 text-center">.col-md-1</div>
<div class="col-md-1 bg-light border py-2 mb-3 text-center">.col-md-1</div>
<div class="col-md-1 bg-light border py-2 mb-3 text-center">.col-md-1</div>
<div class="col-md-1 bg-light border py-2 mb-3 text-center">.col-md-1</div>
<div class="col-md-1 bg-light border py-2 mb-3 text-center">.col-md-1</div>
<div class="col-md-1 bg-light border py-2 mb-3 text-center">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-2 bg-light border py-2 mb-3 text-center">.col-md-2</div>
<div class="col-md-2 bg-light border py-2 mb-3 text-center">.col-md-2</div>
<div class="col-md-2 bg-light border py-2 mb-3 text-center">.col-md-2</div>
<div class="col-md-2 bg-light border py-2 mb-3 text-center">.col-md-2</div>
<div class="col-md-2 bg-light border py-2 mb-3 text-center">.col-md-2</div>
<div class="col-md-2 bg-light border py-2 mb-3 text-center">.col-md-2</div>
</div>
<div class="row">
<div class="col-md-3 bg-light border py-2 mb-3 text-center">.col-md-3</div>
<div class="col-md-3 bg-light border py-2 mb-3 text-center">.col-md-3</div>
<div class="col-md-3 bg-light border py-2 mb-3 text-center">.col-md-3</div>
<div class="col-md-3 bg-light border py-2 mb-3 text-center">.col-md-3</div>
</div>
<div class="row">
<div class="col-md-4 bg-light border py-2 mb-3 text-center">.col-md-4</div>
<div class="col-md-4 bg-light border py-2 mb-3 text-center">.col-md-4</div>
<div class="col-md-4 bg-light border py-2 mb-3 text-center">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-5 bg-light border py-2 mb-3 text-center">.col-md-5</div>
<div class="col-md-5 bg-light border py-2 mb-3 text-center">.col-md-5</div>
<div class="col-md-2 bg-light border py-2 mb-3 text-center">.col-md-2</div>
</div>
<div class="row">
<div class="col-md-6 bg-light border py-2 mb-3 text-center">.col-md-6</div>
<div class="col-md-6 bg-light border py-2 mb-3 text-center">.col-md-6</div>
</div>
<div class="row">
<div class="col-md-1 bg-light border py-2 mb-3 text-center">.col-md-1</div>
<div class="col-md-11 bg-light border py-2 mb-3 text-center">.col-md-11</div>
</div>
<div class="row">
<div class="col-md-2 bg-light border py-2 mb-3 text-center">.col-md-2</div>
<div class="col-md-10 bg-light border py-2 mb-3 text-center">.col-md-10</div>
</div>
<div class="row">
<div class="col-md-3 bg-light border py-2 mb-3 text-center">.col-md-3</div>
<div class="col-md-9 bg-light border py-2 mb-3 text-center">.col-md-9</div>
</div>
<div class="row">
<div class="col-md-4 bg-light border py-2 mb-3 text-center">.col-md-4</div>
<div class="col-md-8 bg-light border py-2 mb-3 text-center">.col-md-8</div>
</div>
<div class="row">
<div class="col-md-5 bg-light border py-2 text-center">.col-md-5</div>
<div class="col-md-7 bg-light border py-2 text-center">.col-md-7</div>
</div>