Multiple nested columns with grid system

Profile picture for Snæbjørn
Snæbjørn

I can't seem to wrap my head around this.
How do I make this table in the bootstrap grid system?

Here's a regular table:

<table>
  <tr>
	<td>
	  <table>
		<tr>
		  <td>a</td>
		  <td>b</td>
		</tr>
		<tr>
		  <td colspan="2">c</td>
		</tr>
	  </table>
	</td>
	<td>
	  <table>
		<tr>
		  <td>d</td>
		  <td>e</td>
		</tr>
		<tr>
		  <td colspan="2">f</td>
		</tr>
	  </table>
	</td>
  </tr>
</table>

I tried the following:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <div class="row">
                <!-- Left side -->
                <div class="col-xs-8">
                    <div class="row">
                        <!-- 1st column -->
                        <div class="col-xs-4">a</div>
                        <!-- 2nd column -->
                        <div class="col-xs-4">b</div>
                        <!-- colspan 2 -->
                        <div class="col-xs-8">c</div>
                    </div>
                </div>
                <!-- Right side -->
                <div class="col-xs-8">
                    <div class="row">
                        <!-- 3rd column -->
                        <div class="col-xs-4">d</div>
                        <!-- 4th column -->
                        <div class="col-xs-4">e</div>
                        <!-- colspan 2 -->
                        <div class="col-xs-8">f</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

All bootstrap grid rows work off a 12 column layout. If you use more than 12 columns in a single row, the extra column fields will automatically wrap to the next line. Since the left and right table are both defined as col-xs-8, the second one will get bumped to the next line (16 > 12).

Try col-xs-6 instead:

<!-- language: lang-html --> <pre><code>&lt;!-- Left side --&gt; &lt;div class=&quot;<b>col-xs-6</b>&quot;&gt; &lt;!-- Right side --&gt; &lt;div class=&quot;<b>col-xs-6</b>&quot;&gt; </code></pre>

When you nest rows, you begin working off a new, inner 12 column layout that is constrained by the parent of your new row class. I'd update your inner rows to use the following:

<!-- language: lang-html --> <pre><code>&lt;div class=&quot;row&quot;&gt; &lt;!-- 1st column --&gt; &lt;div class=&quot;<b>col-xs-6</b>&quot;&gt;a&lt;/div&gt; &lt;!-- 2nd column --&gt; &lt;div class=&quot;<b>col-xs-6</b>&quot;&gt;b&lt;/div&gt; &lt;!-- colspan 2 --&gt; &lt;div class=&quot;<b>col-xs-12</b>&quot;&gt;c&lt;/div&gt; &lt;/div&gt; </code></pre>

Working Demo in Fiddle

screenshot