Bootstrap - Grid Layout of List Items
<p>I have a web page in which I'm using Bootstrap 3. In this page, I want to have a list of 4 panels place together in a 2x2 grid. I want the grid to basically looks like this:</p>

<pre><code>+-----+-----+
|  1  |  2  |
|  A  |  B  |
+-----+-----+
|  3  |  4  |
|  C  |  D  |
+-----+-----+
</code></pre>

<p>I want the grid to be styled like the a <a href="http://getbootstrap.com/components/#list-group" rel="nofollow">list-group</a> though. By styled, I mean have border stylings and internal padding like a list-group item. I do not want a single column of items. While I've been able to get close as shown in this <a href="http://www.bootply.com/CCYIE9jfWm" rel="nofollow">Bootply</a>, it's not quite there. There is still a blank line between the first and second rows in the grid. But, if I get rid of the blank line, the borders between the rows don't look correct. In addition, I'm not sure if I should use the <code>width:50%</code> like I'm using. </p>

<p>My code in question looks like this:</p>

<pre><code>&lt;div class="container"&gt;
  &lt;div class="list-group list-group-horizontal block" style="width:100%;"&gt;
    &lt;div class="list-group-item" style="width:50%;"&gt;
      &lt;h4&gt;Portion 1&lt;/h4&gt;
      &lt;h4&gt;&lt;small&gt;This is a description&lt;/small&gt;&lt;/h4&gt;
    &lt;/div&gt;
    &lt;div class="list-group-item" style="width:50%;"&gt;
      &lt;h4&gt;Portion 2&lt;/h4&gt;
      &lt;h4&gt;&lt;small&gt;This is a description&lt;/small&gt;&lt;/h4&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="list-group list-group-horizontal block" style="width:100%;"&gt;
    &lt;div class="list-group-item" style="width:50%;"&gt;
      &lt;h4&gt;Portion 3&lt;/h4&gt;
      &lt;h4&gt;&lt;small&gt;This is a description&lt;/small&gt;&lt;/h4&gt;
    &lt;/div&gt;

    &lt;div class="list-group-item" style="width:50%;"&gt;
      &lt;h4&gt;Portion 4&lt;/h4&gt;
      &lt;h4&gt;&lt;small&gt;This is a description&lt;/small&gt;&lt;/h4&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>What am I doing incorrect in my approach to this layout? </p>