Creating a layout using bootstrap grid with polygonal shape

Question

I am trying to create a layout using bootstrap grid in polygonal shape but somehow the layout height is not matching, I tried to match height using JS but cant get it, may be if somebody have idea of doing it in other way, please help!

Here is the example how I am trying to achieve, please note that every column would have hover effect as well and in the same shape as its showing by default:

Here is JSfiddle demo

CSS

<style>
  .main-wrapper{float:left; width:100%; background:#cccccc;}
  .col-md-3{border: 1px solid black;}
  .overflowH{overflow: hidden;} 
</style>

HTML

<div class="container-fluid">
  <div class="row fullH overflowH">
    <div class="col-md-3">Text Here</div>
    <div class="col-md-3">Text Here</div>
    <div class="col-md-3">Text Here</div>
    <div class="col-md-3">Text Here</div>
    <div class="col-md-3">Text Here</div>
    <div class="col-md-3">Text Here</div>
    <div class="col-md-3">Text Here</div>
    <div class="col-md-3">Text Here</div>
    <div class="col-md-3">Text Here</div>
    <div class="col-md-3">Text Here</div>
   </div>
 </div>
</div>

jQuery

//Resize div height to viewport size
function setHeight() {
    windowHeight = $(window).innerHeight();
    $('.fullH').css('height', windowHeight);
};
setHeight();
$(window).resize(function() {
    setHeight();
});
//Rotated box
$('.col-md-3').height( Math.round( $('.col-md-3').width() ) * Math.tan(0.523599) );
$('.col-md-3').css('transform', 'skewY(-30deg)');

Answer 1

As mentioned above by @Brett Gregson rotating row instead of column should be good idea, check the code below, I have created custom col instead of bootstrap so you just need to write media query for that to make it work in responsive.

Here is the code:

CSS

.col-md-25{border: 1px solid black; width:20%; float:left;}

HTML

<div class="container-fluid">
 <div class="row" style="margin-top:-465px;">
    <div class="col-md-25"></div>
    <div class="col-md-25"></div>
    <div class="col-md-25"></div>
    <div class="col-md-25"></div>
    <div class="col-md-25"></div>
  </div>
 <div class="row">
    <div class="col-md-25">Text Here 1</div>
    <div class="col-md-25">Text Here 2</div>
    <div class="col-md-25">Text Here 3</div>
    <div class="col-md-25">Text Here 4</div>
    <div class="col-md-25">Text Here 5</div>
 </div>  
 <div class="row">
    <div class="col-md-25">Text Here 1</div>
    <div class="col-md-25">Text Here 2</div>
    <div class="col-md-25">Text Here 3</div>
    <div class="col-md-25">Text Here 4</div>
    <div class="col-md-25">Text Here 5</div>
 </div>  
 <div class="row">
    <div class="col-md-25">Text Here 1</div>
    <div class="col-md-25">Text Here 2</div>
    <div class="col-md-25">Text Here 3</div>
    <div class="col-md-25">Text Here 4</div>
    <div class="col-md-25">Text Here 5</div>
 </div>
 </div>

jQuery

$('.col-md-25').height( Math.round( $('.col-md-25').width() ) * Math.tan(0.523599) );

$('.row').css('transform', 'skewY(-25deg)');