bootstrap grid layout questions

69 views Asked by At

https://i.stack.imgur.com/ZELOE.jpg

is there anyway to achieve the responsive grid layout above using bootstrap?

i not sure whether this is the correct way to do it?

<div class="container-fluid">
<div class="row">
<div class="col-md-6"><img src="http://s27.postimg.org/twfuw219f/256x256.jpg"></div>
<div class="col-md-6 col-sm-3"><img src="http://s8.postimg.org/w0dxtotv9/256x120.jpg"></div>
<div class="col-md-6 col-sm-3"><img src="http://s8.postimg.org/w0dxtotv9/256x120.jpg"></div>
</div>
</div>

https://jsfiddle.net/w3nta1/DTcHh/8581/

1

There are 1 answers

1
Laurent Meyer On BEST ANSWER

Yes, it seems that it's the right way to proceed: I modified your JSFiddle to give you an example (there)

    <div class="container">
    <div class="row row-eq-height">
        <div class="col-md-6">
            <img src="http://colouringbook.org/SVG/2011/COLOURINGBOOK.ORG/CBOOK/fotocamera_foto_camera_icon_coloring_book_colouring-2555px.png">
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12"><img
                        src="http://colouringbook.org/SVG/2011/COLOURINGBOOK.ORG/CBOOK/fotocamera_foto_camera_icon_coloring_book_colouring-2555px.png">
                </div>
            </div>
            <div class="row">
                <div class="col-md-12"><img
                        src="http://colouringbook.org/SVG/2011/COLOURINGBOOK.ORG/CBOOK/fotocamera_foto_camera_icon_coloring_book_colouring-2555px.png">
                </div>
            </div>
        </div>
    </div>
</div>

You maybe need to manage the height of each column but the example there explains that very well

(I'm not bootstrap expert, I prefer Foundation)