Metro tile layout with Bootstrap?

Question

I'm trying to create a tile layout with bootstrap. Here is the website that I would like to try to copy: link

I kind of achieved this by using columns but using margins and paddings will break them. Aforementioned website uses some kind of script to automatically set their position value (e.g., position:absolute;top:0;left:248px). How is this done?

Here is what I have: jsfiddle

<div class="col-lg-4">
        <div class="row">
            <div class="col-lg-12 metro-1">
                <img src="https://placehold.it/600x600/313236/000000" style="width:100%;">
                <a href="#" class="metro-link"></a>
                <div class="top-text-block">
                    <div class="top-text-block-inner">
                        check out our<br>hottest winit
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="col-lg-12 metro-2">
            <div class="row upper-metro">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <img src="https://placehold.it/300x300/ffffff/000000" style="width:100%;">
                    <a href="#" class="block-layer">
                        <div class="block-layer-inner">
                        </div>
                    </a>
                    <div class="bottom-text-block">
                        <div class="block-name">
                            Text
                        </div>
                        <div class="block-price">
                            Price
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <img src="https://placehold.it/300x300/23AE8F/000000" style="width:100%;">
                    <a href="#" class="block-layer">
                        <div class="block-layer-inner">
                        </div>
                    </a>
                    <div class="bottom-text-block">
                        <div class="block-name">
                            Text
                        </div>
                        <div class="block-price">
                            Price
                        </div>
                    </div>
                </div>
            </div>
            <div class="row lower-metro">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 lower-metro-inner">
                    <img src="https://placehold.it/600x300/DEDCE1/000000" style="width:100%;">
                    <div class="center-text-block">
                        some text goes here
                    </div>
                    <a href="#" class="metro-link"></a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="col-lg-12 metro-3">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <div class="col-lg-12">
                        <img src="https://placehold.it/300x300/5B2988/000000" style="width:100%;">
                        <a href="#" class="block-layer">
                        <div class="block-layer-inner">
                        </div>
                    </a>
                    <div class="bottom-text-block">
                        <div class="block-name">
                            Text
                        </div>
                        <div class="block-price">
                            Price
                        </div>
                    </div>
                    </div>
                    <div class="col-lg-12">
                        <img src="https://placehold.it/300x300/C64001/000000" style="width:100%;">
                        <a href="#" class="block-layer">
                        <div class="block-layer-inner">
                        </div>
                    </a>
                    <div class="bottom-text-block">
                        <div class="block-name">
                            Text
                        </div>
                        <div class="block-price">
                            Price
                        </div>
                    </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 right-metro">
                    <img src="https://placehold.it/300x600/017B39/000000" style="width:100%;">
                    <div class="center-text-block">
                        some text goes here
                    </div>
                    <a href="#" class="metro-link"></a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="col-lg-12 metro-4">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <div class="col-lg-12">
                        <img src="https://placehold.it/300x300/5535B1/000000" style="width:100%;">
                        <a href="#" class="block-layer">
                        <div class="block-layer-inner">
                        </div>
                    </a>
                    <div class="bottom-text-block">
                        <div class="block-name">
                            Text
                        </div>
                        <div class="block-price">
                            Price
                        </div>
                    </div>
                    </div>
                    <div class="col-lg-12">
                        <img src="https://placehold.it/300x300/7EC0BF/000000" style="width:100%;">
                        <a href="#" class="block-layer">
                        <div class="block-layer-inner">
                        </div>
                    </a>
                    <div class="bottom-text-block">
                        <div class="block-name">
                            Text
                        </div>
                        <div class="block-price">
                            Price
                        </div>
                    </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <div class="col-lg-12">
                        <img src="https://placehold.it/300x300/E4A706/000000" style="width:100%;">
                        <a href="#" class="block-layer">
                        <div class="block-layer-inner">
                        </div>
                    </a>
                    <div class="bottom-text-block">
                        <div class="block-name">
                            Text
                        </div>
                        <div class="block-price">
                            Price
                        </div>
                    </div>
                    </div>
                    <div class="col-lg-12">
                        <img src="https://placehold.it/300x300/925D63/000000" style="width:100%;">
                        <a href="#" class="block-layer">
                        <div class="block-layer-inner">
                        </div>
                    </a>
                    <div class="bottom-text-block">
                        <div class="block-name">
                            Text
                        </div>
                        <div class="block-price">
                            Price
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

What about using the right framework? http://metroui.org.ua/ . Bootstrap is not ready for that, you will need to do very weird things to achieve that with bootstrap (however, bootstrap skinks, better Zurb Foundation) — Marcos Pérez Gude, Oct 26 '16 at 16:07
This is a masonry layout managed by JS and absolute positioning....there are **many** similar questions here on SO. — Paulie_D, Oct 26 '16 at 16:21
http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view-with-css — Paulie_D, Oct 26 '16 at 16:24
ah gotcha. I didn't know what this style was called. Thanks so much! — inertia, Oct 26 '16 at 16:30

score 0 · Accepted Answer · answered Oct 26 '16 at 16:31

0

It was called Mansory layout. I didn't know what it was called but now I got it. Funny how things are so easy when you actually know what to search for. Haha!

answered Oct 26 '16 at 16:31

inertia

3,997
2
17
26

Metro tile layout with Bootstrap?

1 Answers1