Panels in a bootstrap grid layout

Question

what is the correct way to make use of the bootstrap layout system to accomplish something like this: That is, I want to position the panels in a grid layout, but also have a grid layout approach for the content within the panels.

Should I have nested grids? Do all columns need to be inside a row? Can a panel span several rows in a top level grid? Should each panel contain it's own 12 column grid? Etc.. There seem to be many ways to accomplish this, but Id like to know the best practice.

Answer 1

This will give you the grid style, that you require : (EDITED)

<div class="row">
    <div class="col-xs-6">
        <!-- START PANEL 1 -->
        <div class="panel panel-default">
            <div class="panel-heading">Panel Heading</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-6">Dummy Content</div>
                    <div class="col-xs-6">Dummy Content</div> 
                </div>
                <div class="row">
                    <div class="col-xs-6">Dummy Content</div>
                    <div class="col-xs-6">Dummy Content</div> 
                </div>
            </div>
        </div>
         <!-- END PANEL 1 -->

        <!-- START PANEL 3 -->
        <div class="panel panel-default">
            <div class="panel-heading">Panel Heading</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-3">Dummy Content</div>
                    <div class="col-xs-3">Dummy Content</div>
                    <div class="col-xs-3">Dummy Content</div>
                    <div class="col-xs-3">Dummy Content</div>
                </div>
            </div>
        </div>
        <!-- END PANEL 3 -->
    </div>
    <div class="col-xs-6">
        <!-- START PANEL 2 -->
        <div class="panel panel-default">
            <div class="panel-heading">Panel Heading</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-6">Dummy Content</div>
                    <div class="col-xs-6">Dummy Content</div>
                </div>
                <div class="row">
                    <div class="col-xs-6">Dummy Content</div>
                    <div class="col-xs-6">Dummy Content</div>
                </div>
                <div class="row">
                    <div class="col-xs-6">Dummy Content</div>
                    <div class="col-xs-6">Dummy Content</div>
                </div>
            </div>
        </div>        
        <!-- END PANEL 2 -->
    </div>
</div>