How to make this grid with bootstrap?

-1

I'm trying to make this grid with bootstrap but without success:

Itriedtodowithtablehtmlanddiv:

<table><thead></thead><tbody><tr><td><divclass="row">
                    <div class="col-md-5"> 
                    </div>
                    <div class="col-md-2"> 
                    </div>
                    <div class="col-md-2"> 
                    </div>
                    <div class="col-md-3">
                    </div>

                </div>
                <div class="row">
                    <div class="col-md-5">

                    </div>
                    <div class="col-md-5">

                    </div>
                    <div class="col-md-2">

                    </div>

                </div>
                <div class="row">
                    <div class="col-md-2">

                    </div>
                    <div class="col-md-2">


                    </div>
                    <div class="col-md-3">

                    </div>
                    <div class="col-md-3">

                    </div>
                    <div class="col-md-2">

                    </div>
                </div>
            </td>
            <td>

            </td>
        </tr>

        <tr>
            <td>
                <div class="col-md-3">

                </div>
                <div class="col-md-4">

                </div>
                <div class="col-md-5">

                </div>
            </td>
            <td>

            </td>
        </tr>
        <tr>
            <td colspan="3">
                <div class="col-md-12">

                </div>
            </td>

        </tr>
    </tbody>
</table>
    
asked by anonymous 17.05.2018 / 01:40

1 answer

0

To resolve you can group the first 4 Rows into a container . In case my I called Wrapper as you will see in CSS. Then I used the class .col2 to define the behavior of the image that is actually the background of a col-xs-2 that has position:absolut and height de 100% to stay forever of the height of the Wrapper . This means that if you want 8 Rows inside the Wrapper the image will still occupy the entire height!

OBS 1: The styles I used in [class^=col-] are just for you to see the Grid format. Now the class .wrapper and .col2 you will need!

OBS2: I put the entire Grid inside the default class of Bootstrap .container , but if you want Grid to occupy 100% of screen width just remove to div.container ok.

[class^=col-] {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #eee;
    background-color: rgba(86,61,124,.15);
    border: 1px solid #ddd;
    border: 1px solid rgba(86,61,124,.2);
    box-sizing: border-box;
}
.wrapper {
    position: relative;
    box-sizing: border-box;
    margin: 0 -15px;
    padding: 0 15px;
}
.col2 {
    position: absolute !important;
    right: 0;
    height: 100%;
    background-image: url(http://placecage.com/200/200);
    background-size: cover;
    background-position: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
  
<div class="container">
    <div class="wrapper">
        <div class="row">
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-2 col2">.col-xs-2</div>
        </div>
        <div class="row">
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
        </div>
        <div class="row">
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
        </div>
        <div class="row">
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
            <div class="col-xs-1">.col-xs-1</div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-1">.col-xs-1</div>
        <div class="col-xs-1">.col-xs-1</div>
        <div class="col-xs-1">.col-xs-1</div>
        <div class="col-xs-1">.col-xs-1</div>
        <div class="col-xs-1">.col-xs-1</div>
        <div class="col-xs-1">.col-xs-1</div>
        <div class="col-xs-1">.col-xs-1</div>
        <div class="col-xs-1">.col-xs-1</div>
        <div class="col-xs-1">.col-xs-1</div>
        <div class="col-xs-1">.col-xs-1</div>
        <div class="col-xs-1">.col-xs-1</div>
        <div class="col-xs-1">.col-xs-1</div>
    </div>
    <div class="row">
        <div class="col-xs-12">.col-xs-12</div>
    </div>
</div>
    
17.05.2018 / 18:12