Create Equal Div Column Height Bootstrap Using CSS: Hi Friends, Today i will tell you how to make your bootstrap column equal height when content is less or more in some column, As we know when our column didn’t equal, at that moment our user interface is not looking good. Some of the coders are using javascript or jquery to remove such kind of issue but it increase the page speed.
We are using only CSS to convert the simple column into equal height responsive columns of bootstrap. We will write few lines of code to make it happen and also consider the user interface.
You can see the live demo by clicking on the below button or you can also download the code free of cost.
For Creating Equal height columns, you have to put below few lines of code in your style sheet or CSS.
.row { overflow: hidden; } [class*="col-"]{ margin-bottom: -99999px; padding-bottom: 99999px; } |
.row { overflow: hidden; }[class*="col-"]{ margin-bottom: -99999px; padding-bottom: 99999px; }
Make the overflow is hidden and select all the columns in which margin and padding bottom is -99999px and 99999px to provide the functionality of good looking equal height div’s
For any problem you can see the live demo and download the code from below.
Read About Other Interesting Things below.
I hope you will like Equal Div Column Height Bootstrap Using CSS. If You found it useful please subscribe my blog.
Categories: Website Design
Leave a Reply