Combining rows within columns to support more than 12 cols within parent row

The following snippet of Bootstrap code can be used to effectively support more than 12 cols within a parent row - in this case 16 columns.

The technique used here is to first divide the parent row into 4 3-col blocks.

Each of these 3-col blocks are further divided into 4 3-col blocks.

This result is 16 columns supported in the parent row.

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3 col-sm-3 col-xs-6">
            <div class="row">
                <div class="col-md-3">
                    <h1>1 </h1></div>
                <div class="col-md-3">
                    <h1>2 </h1></div>
                <div class="col-md-3">
                    <h1>3 </h1></div>
                <div class="col-md-3">
                    <h1>4 </h1></div>
            </div>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-6">
            <div class="row">
                <div class="col-md-3">
                    <h1>5 </h1></div>
                <div class="col-md-3">
                    <h1>6 </h1></div>
                <div class="col-md-3">
                    <h1>7 </h1></div>
                <div class="col-md-3">
                    <h1>8 </h1></div>
            </div>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-6">
            <div class="row">
                <div class="col-md-3">
                    <h1>9 </h1></div>
                <div class="col-md-3">
                    <h1>10 </h1></div>
                <div class="col-md-3">
                    <h1>11 </h1></div>
                <div class="col-md-3">
                    <h1>12 </h1></div>
            </div>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-6">
            <div class="row">
                <div class="col-md-3">
                    <h1>13 </h1></div>
                <div class="col-md-3">
                    <h1>14 </h1></div>
                <div class="col-md-3">
                    <h1>15 </h1></div>
                <div class="col-md-3">
                    <h1>16 </h1></div>
            </div>
        </div>
    </div>
</div>

1 Like

That's a great little trick KL, would you post that in the Tips & Tricks thread of this Help forum? That would put it with many others that have been added. :)

What’s the point of that? After all, more often than not, you don’t just need a real 16 columns. More often than not, you need a 16-column grid, a 16-column layout.

For example, how do you stretch the text over 9 columns of the 16-column grid in the example above?