md. motailab md. motailab - 7 months ago 8
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

Comments