md. motailab md. motailab - 7 months ago 9
HTML Question

how to do like this image using bootstrap

how to do like this image using bootstrap

this is my code what is mistake in this code please help me

<div class="row">
<div class="img-5">
<div class="col-md-4">
<div class="hn-img-1">
<img src="img/1.jpg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="hn-img-1">
<img src="img/2.jpg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="hn-img-1">
<img src="img/3.jpg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="hn-img-1">
<img src="img/5.jpg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="hn-img-1">
<img src="img/4.jpg" alt="" class="mt-top">
</div>
</div>
</div>
</div>


and result is this

this is my code result``

Answer

You can make use of nested rows to create the structure as you want. This is a sample code that can lead you to the design you want.

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

        </div>
    </div>
    <div class="col-md-4">
        <div class="well">1
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </div>
    </div>
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <div class="well">2</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="well">4</div>
            </div>

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

JSFIDDLE