Bootstrap Responsive hexagon

Today we will see how to create a Responsive Hexagon that will adjust automatically according to its outer container. Actually we will use bootstrap grid and the hexagon will response according to bootstrap grid. We have already seen how to create css3 hexagon but today we will make it responsive using a little jQuery .


 

bootstrap responsive hexagon
bootstrap responsive hexagon


See the demo of Bootstrap Responsive hexagon
Download it

 

Let us see the css first

.brhex,
.brhex:before,
.brhex:after {
    border-style: solid;
    border-color: #1fcede;
    border-width: 1px;
    border-top: none;
    border-bottom: none;
    height: 100px;
    width: 173.2px;

    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;
}

.brhex {
    text-align: center;
    line-height: 100px;
    position:relative;
    z-index:0; 
}

.brhex:after,
.brhex:before {
    content: "";
    position: absolute;
    top:0;
    left: -1px;
    z-index: -1;
}

.brhex:before {
    -webkit-transform: rotate(60deg);
       -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
         -o-transform: rotate(60deg);
            transform: rotate(60deg);
}

.brhex:after {
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
}

.brhex:hover,
.brhex:hover:before,
.brhex:hover:after{
    background-color: #1fcede;
} 
.hex-responsive {
    width: 100%; 
}
.hex-responsive:after ,
.hex-responsive:before {
    width: 100%;
    height: 100%;
}

All is same like before but we have added an extra class "hex-responsive" that will used to target by js. Actually we will inject height and width respectively it's parent element.  And in this project, we have used bootstrap grid 🙂


 


okay let us see the JavaScript.

function responsiveHex(){
    jQuery('.hex-responsive').each(function(e){
	var width = jQuery(this).parent().width(); //will added on hexagon
	var height = width / 1.74; //will added on hexagon
	var padding = height/2+15; // will added on the parent of hexagon
	//Add height and width on Hexagon 
	jQuery(this).css('width': width, 'height': height); 
	//Add padding top the parent of hexagon for proper fit
	jQuery(this).parent().css('padding-top': padding, 'padding-bottom': padding, 'overflow':'hidden'); 
    });
}

jQuery(document).on("ready", responsiveHex);
jQuery(window).on("resize", responsiveHex); 

We used jQuey a little that will detect the width of '.hex-responsive' parent inject the height on hex-responsive after a little calculation.  Also this script will add padding to the parent of hex-responsive  to scale properly.

Related Post

Remove Firefox dotted outline select on Bootstrap As a front end web developer, I mostly use Bootstrap framework. And I have often get a problem with  Firefox dotted outline select on Bootstrap. ...
50+ Top 2015 Free and Premium CSS Pricing Table Pricing Tables are familiarly used for displaying prices per product or services. It is remarkably important part for a business website that reveals ...
CSS Hexagon Ratio of Height Width A hexagon is a polygon with 6 edges and 6 vertex.  Following is a example of hexagon taken from Wikipedia and there you will get more details about he...
How to Scroll top to bottom in HTML CSS jQuery Hello there,  I am gonna show you how to scroll top to bottom in html web page. Well, to do this, we will use jQuery library, CSS and of-courses html....

13 thoughts on “Bootstrap Responsive hexagon”

      1. Well, it's possible, but I don't have enough free time to help you on it. And sometime you have to work outside of bootstrap grid 🙂

  1. how can the width of the border be the animated hover effect (and not the background color) but still connect all the lines? when i increase the boarder width, the lines are no longer 'connected'...

    Thanks!!

  2. Hi,
    Well, then you have to work with two hexagon, one will be outer and the other as inner. Inner will be little smaller then the outer and both will appear with background color but in different color. Then, on hover, only change the outer bg color.
    Try it, if you got problem, let me know, will make a demo
    Thanks 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *


*