"Metro style dynamic Tiles "
Bootstrap 3.2.0 Snippet by joao12ferreira

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container dynamicTile"> <div class="row "> <div class="col-sm-2 col-xs-4"> <div id="tile1" class="tile"> <div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://handsontek.net/demoimages/tiles/twitter1.png" class="img-responsive"/> </div> <div class="item"> <img src="http://handsontek.net/demoimages/tiles/twitter2.png" class="img-responsive"/> </div> </div> </div> </div> </div> <div class="col-sm-2 col-xs-4"> <div id="tile2" class="tile"> <div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://handsontek.net/demoimages/tiles/hot.png" class="img-responsive"/> </div> <div class="item"> <img src="http://handsontek.net/demoimages/tiles/hot2.png" class="img-responsive"/> </div> <div class="item"> <img src="http://handsontek.net/demoimages/tiles/hot3.png" class="img-responsive"/> </div> </div> </div> </div> </div> <div class="col-sm-2 col-xs-4"> <div id="tile3" class="tile"> <div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://handsontek.net/demoimages/tiles/weather2.png" class="img-responsive"/> </div> <div class="item"> <img src="http://handsontek.net/demoimages/tiles/weather.png" class="img-responsive"/> </div> </div> </div> </div> </div> <div class="col-sm-2 col-xs-4"> <div id="tile4" class="tile"> <div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://handsontek.net/demoimages/tiles/facebook3.png" class="img-responsive"/> </div> <div class="item"> <img src="http://handsontek.net/demoimages/tiles/facebook2.png" class="img-responsive"/> </div> </div> </div> </div> </div> <div class="col-sm-2 col-xs-4"> <div id="tile5" class="tile"> <div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://handsontek.net/demoimages/tiles/neews.png" class="img-responsive"/> </div> <div class="item"> <img src="http://handsontek.net/demoimages/tiles/neews2.png" class="img-responsive"/> </div> </div> </div> </div> </div> <div class="col-sm-2 col-xs-4"> <div id="tile6" class="tile"> <div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://handsontek.net/demoimages/tiles/skype.png" class="img-responsive"/> </div> <div class="item"> <img src="http://handsontek.net/demoimages/tiles/skype2.png" class="img-responsive"/> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-sm-4 col-xs-8"> <div id="tile7" class="tile"> <div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://handsontek.net/demoimages/tiles/gallery.png" class="img-responsive"/> </div> <div class="item"> <img src="http://handsontek.net/demoimages/tiles/gallery2.png" class="img-responsive"/> </div> <div class="item"> <img src="http://handsontek.net/demoimages/tiles/gallery3.png" class="img-responsive"/> </div> </div> </div> </div> </div> <div class="col-sm-2 col-xs-4"> <div id="tile8" class="tile"> <div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://handsontek.net/demoimages/tiles/music.png" class="img-responsive"/> </div> <div class="item"> <img src="http://handsontek.net/demoimages/tiles/music2.png" class="img-responsive"/> </div> </div> </div> </div> </div> <div class="col-sm-2 col-xs-4"> <div id="tile9" class="tile"> <div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://handsontek.net/demoimages/tiles/calendar.png" class="img-responsive"/> </div> <div class="item"> <img src="http://handsontek.net/demoimages/tiles/calendar2.png" class="img-responsive"/> </div> </div> </div> </div> </div> <div class="col-sm-4 col-xs-8"> <div id="tile10" class="tile"> <div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <h3 class="tilecaption"><i class="fa fa-child fa-4x"></i></h3> </div> <div class="item"> <h3 class="tilecaption">Customize your tiles</h3> </div> <div class="item"> <h3 class="tilecaption">Text, Icons, Images</h3> </div> <div class="item"> <h3 class="tilecaption">Combine them and create your metro style</h3> </div> </div> </div> </div> </div> </div>
.dynamicTile .col-sm-2.col-xs-4{ padding:5px; } .dynamicTile .col-sm-4.col-xs-8{ padding:5px; } #tile1{ background: rgb(0,172,238); } #tile2{ background: rgb(243,243,243); } #tile3{ background: rgb(71,193,228); } #tile4{ background-image: url('http://handsontek.net/demoimages/tiles/facebook.png'); background-size: cover; } #tile5{ background: rgb(175,26,63); } #tile6{ background: rgb(62,157,215); } #tile7{ background: white; } #tile8{ background: rgb(209,70,37); } #tile9{ background: rgb(0,142,0); } #tile10{ background: rgb(0,93,233); } .tilecaption{ position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); margin:0!important; text-align: center; color:white; font-family: Segoe UI; font-weight: lighter; }
$( document ).ready(function() { $(".tile").height($("#tile1").width()); $(".carousel").height($("#tile1").width()); $(".item").height($("#tile1").width()); $(window).resize(function() { if(this.resizeTO) clearTimeout(this.resizeTO); this.resizeTO = setTimeout(function() { $(this).trigger('resizeEnd'); }, 10); }); $(window).bind('resizeEnd', function() { $(".tile").height($("#tile1").width()); $(".carousel").height($("#tile1").width()); $(".item").height($("#tile1").width()); }); });

Related: See More

BLK• Design System
Dynamic Sortable Tables
Bootstrap 4 Animated Dynamic Form
Tabs style 1

Questions / Comments:

excellent !

Amin Ak () - 7 years ago - Reply 0

How can I create a caption as description at the bottom of each tile where the text fits always the size of the tile?
I created a description at the bottom already as followed:
The CSS:
[code]
<style>
.tileoutter{
display:table;
line-height:2.5em;
position:absolute;
bottom:0px;
left:0px;
width:100%;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, .6);
}
.tileinner{
display:table-cell;
vertical-align:middle;
}
.tiledescription {
color:white;
width: 100%;
display: block;
text-align:center;
}
</style>
[code]

The HTML
[code]
<div class="col-sm-2 col-xs-4">
<div id="tile8" class="tile">
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="images/myimage.png" class="img-responsive"/>
<div class="tileoutter">
<div class="tileinner">
<div class="tiledescription">
This is a description.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
[code]

The issue is, that if you resize the screen (or view on iPhone,...) the tiles will be resized fine but not the font. How can I make the text in the description even responsive?

mafli.net - Domaining () - 7 years ago - Reply 0

This is great. I was banging my head about implementing angularJS implementation of the same. Afriad, couldnt figure out decent way to. It seems 'items' class doesnt work dynamc. Any help is most appreciated.

hardik panchal () - 8 years ago - Reply 0

guys i want so much to run this perfectly but classes tile ,fa fa-child fa-4x,carousel-slide cannot be found...why? pls let me know

nikiforos () - 9 years ago - Reply 0

Here is a full implementation of your wonderful snippet : http://ecomusee-bois-foret....

I created a cms management module allowing me to have two types of slides :
- static slides with photo or text
- dynamic slides linking to specific tables of my MySql database : for exemple the three next events

The module also allows to have as many tiles as you want and to choose the sm and xs size for each...

Webrunner () - 9 years ago - Reply 0

Here is my implementation...I added some hover effects, flip tile, vertical and horizontal sliding, nested video on autoplay, and rounded corners.
http://timbusken.com/statis...
Thanks and Cheers!!
Tim Busken

Tim Busken () - 9 years ago - Reply 0

Nice looking, and I love the autoplay video.

Webrunner () - 9 years ago - Reply 0

hi just a quick question how do i make the height bigger on another row?

kepbem () - 10 years ago - Reply 0

On which row?

maxsurguy () - 10 years ago - Reply 0

Hi Thanks for replying to me...
Well its a third row, can't seem to force the height of any of the carousel contents to 370px.
Where is the 185px height added to the current carousel contents?

kepbem () - 10 years ago - Reply 0

je l'aimé trop :) ça nécessite encore un peu de modification coté JS merci pour le partage

Amine Karismatik () - 10 years ago - Reply 0

Thanks for this great great snippet, here is a simple php implementation I just wrote to make it dynamic... Be careful, Disqus converts all simple quotes to double...
- Edit the css: turn all ids to classes (#tile1 to .tile1)...
- Edit the js: replace all #tile1 by #tile0

Webrunner () - 10 years ago - Reply 0

cool

wuxincheng () - 10 years ago - Reply 0

hey great job.. i used it in a project of mine and did a lil work around with the grids and the result was amazing.. Thnx a lot man..

Sourav Mohanty () - 10 years ago - Reply 0

Hello, can you share some tips about what you did with this snippet?

Webrunner () - 10 years ago - Reply 0

This is really cool.. is there anyway the tiles can be set to slide at random times? thanks

Kavish () - 10 years ago - Reply 0

Got it, you just have to insert a different data interval for each carousel.

Kavish () - 10 years ago - Reply 0

this is awesome, thanks!

beau () - 10 years ago - Reply 0