How do I make this panel with bootstrap grid system?

Question

I know how to use the bootstrap grid system but in this project I need to do the Row class has height size and aligns with the other grid I will post an example here

https://www.geckoboard.com/learn/dashboard-examples/salesforce-dashboard-example/live-dashboard/#. V7z8xstv_qa

I want to make Dashboard like this but using bootstrap grid system as I do in the matter of the size of the Row and col "top sdr"

Answer 1

As you did not say whether it will be dynamic or not, the amount of blocks, I considered a fixed amount equal to the example.

But I believe that the secret is to define a minimum size in the blocks, the ones that are larger, basically uses the minimum value as a base and also considers the size of the top and bottom margins that may eventually have.

I made a very basic example, but I think it’s already a starting point.

.row div {
    min-height: 133px;
}

.margin-top {
    margin-top: 10px;
}

.margin-bottom {
    margin-bottom: 10px;
}

.margin-left {
    margin-left: 10px;
}

.margin-right {
    margin-right: 10px;
}

#col1 .row div {
    background: #F00;
}

#col1-1 {
    height: 276px; /* 133 da altura de cada div + 20 das 2 margins da coluna do meio */
}

#col2 .row div {
    background: #0F0;
    height: 133px;
}

#col3 .row div {
    background: #00F;
}

#col3-0 {
    height: 276px /* mesma coisa de #col1-1 */;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-4" id="col1">
            <div class="row">
                <div class="col-xs-12 margin-bottom" id="col1-1">1.0</div>
                <div class="col-xs-6">1.1</div>
                <div class="col-xs-6">1.2</div>
            </div>
        </div>
        <div class="col-xs-6" id="col2">
            <div class="row margin-bottom">
                <div class="col-xs-8">2.0</div>
                <div class="col-xs-4">2.1</div>
            </div>
            <div class="row margin-bottom">
                <div class="col-xs-4">2.2</div>
                <div class="col-xs-4">2.3</div>
                <div class="col-xs-4">2.4</div>
            </div>
            <div class="row">
                <div class="col-xs-4">2.5</div>
                <div class="col-xs-4">2.6</div>
                <div class="col-xs-4">2.7</div>
            </div>
        </div>
        <div class="col-xs-2" id="col3">
            <div class="row">
                <div class="col-xs-12 margin-bottom" id="col3-0">3.0</div>
                <div class="col-xs-12" id="col3-1">3.1</div>
            </div>
        </div>
    </div>
</div>