<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" > <div class="item active"> <img src="http://handsontek.net/demoimages/tiles/twitter1.png" class="img-responsive"/> <h3 class="tilecaption">הוסף פרוייקט</h3> </div> </div> </div> </div> <div class="col-sm-2 col-xs-4"> <div id="tile2" class="tile"> <div class="carousel slide" > <div class="item active"> <img src="http://handsontek.net/demoimages/tiles/hot.png" class="img-responsive"/> <h3 class="tilecaption">הוסף פרוייקט</h3> </div> </div> </div> </div> <div class="col-sm-2 col-xs-4"> <div id="tile3" class="tile"> <div class="carousel slide" > <div class="item active"> <img src="http://handsontek.net/demoimages/tiles/weather2.png" class="img-responsive"/> <h3 class="tilecaption">הוסף פרוייקט</h3> </div> </div> </div> </div> <div class="col-sm-2 col-xs-4"> <div id="tile4" class="tile"> <div class="carousel slide" data-ride="carousel"> <div class="item active"> <img src="http://handsontek.net/demoimages/tiles/facebook3.png" class="img-responsive"/> <h3 class="tilecaption">הוסף פרוייקט</h3> </div> </div> </div> </div> <div class="col-sm-2 col-xs-4"> <div id="tile5" class="tile"> <div class="carousel slide" data-ride="carousel"> <div class="item active"> <img src="http://handsontek.net/demoimages/tiles/neews.png" class="img-responsive"/> <h3 class="tilecaption">הוסף פרוייקט</h3> </div> </div> </div> </div> </div> <div class="row"> <div class="col-sm-2 col-xs-4"> <div id="tile10" class="tile"> <div class="carousel slide"> <div id="plus_sign" class="glyphicon glyphicon-plus"></div> <div class="item active"> <h3 class="tilecaption">הוסף פרוייקט</h3> </div> </div> </div> </div> </div>

.dynamicTile .col-sm-2.col-xs-4{ padding:5px; } .dynamicTile .col-sm-4.col-xs-8{ padding:5px; } #tile4{ background-image: url('http://handsontek.net/demoimages/tiles/facebook.png'); background-size: cover; } .tile{ background: #cacaca; } .tilecaption{ position: absolute; width:100%; top: 100%; transform: translateY(-100%); -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); margin:0!important; padding:0.2em; text-align: center; background-color:black; color:#cacaca; font-weight: lighter; font-size: 1em; } #plus_sign{ position: absolute; font-family: 'Glyphicons Halflings'; font-size: 9em; text-align: center; width: 100%; bottom: 7%; color:#919191; }

$( 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()); }); });