How do I make this panel with bootstrap grid system?

Question

How do I make this panel with bootstrap grid system?

Navigation

#1 by (5 votes)

0

I'm having a hard time doing a dashboard sales I know how to use the bootstrap grid system but in this project I need to do the class row has height size and aligns with the other grid I'll post an example here

link

I want to do the same dashboard but using bootstrap grid system as I do in the question of the size of the row and col "top sdr"

html css grid bootstrap

asked by anonymous 19.08.2016 / 05:31

1 answer

How do I get the src attribute from a list of images and create an array using just javascript? Automatic friendly URL in PHP [duplicate]

score 5 · Accepted Answer

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

But I think the secret is to set a minimum size on the blocks, the ones that are bigger, basically use the minimum value as the base, and also consider the size of the top and bottom margins that you may 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>