Sanjeev K Sanjeev K - 3 months ago 11
HTML Question

Creating a layout using bootstrap grid with polygonal shape

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:

sample grid layout

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

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)');