Twitter Bootstrap Question posted in

Twitter bootstrap – How to get dynamic height of div in bootstrap

I am trying to create something similar to https://www.pinterest.com/ homepage where height is decided as per content of Div & all divs automatically adjusts it self using bootstrap.

I tried to do it but It is not working as expected.
Here is fiddle link of what I have tried http://jsfiddle.net/gmm2jcn5/

In fiddle we can see that there is white gap between 2 divs I want to eliminate that gap.

.col-xs-6 {
    border: 1px solid black;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.1/bootstrap.min.js"></script>
<div class="row">
    <div class="col-xs-6">
        <p class="inntertopheading">heading</p>
        <div class="hr"></div>
        <div class="innter-md-text">
            text
            <div class="spacer10"></div>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
    </div>
    <div class="col-xs-6">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <div class="col-xs-6">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <div class="col-xs-6">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
    </div>
</div>
Tags:

2

Answers


  1. 0

    Try the CSS3 column method, this will only require CSS, no modification of markup. The below script will adjust anywhere from 1 to 5 columns based on viewport width:

    .col-xs-6 {
  display: inline-block;
  width: 100%;
  border: 1px solid black;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  -o-column-break-inside: avoid;
  -ms-column-break-inside: avoid;
  column-break-inside: avoid;
}
   
/* Custom, iPhone Retina */

@media only screen and (min-width: 320px) {
  .row {
    -moz-column-count: 1;
    -moz-column-gap: 0px;
    -webkit-column-count: 1;
    -webkit-column-gap: 0px;
    column-count: 1;
    column-gap: 0px;
    width: 100%;
  }
}
/* Extra Small Devices, Phones */

@media only screen and (min-width: 480px) {
  .row {
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    column-count: 2;
    column-gap: 10px;
    width: 100%;
  }
}
/* Small Devices, Tablets */

@media only screen and (min-width: 768px) {
  .row {
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
    width: 100%;
  }
}
/* Medium Devices, Desktops */

@media only screen and (min-width: 992px) {
  .row {
    -moz-column-count: 4;
    -moz-column-gap: 10px;
    -webkit-column-count: 4;
    -webkit-column-gap: 10px;
    column-count: 4;
    column-gap: 10px;
    width: 100%;
  }
}
/* Large Devices, Wide Screens */

@media only screen and (min-width: 1200px) {
  .row {
    -moz-column-count: 5;
    -moz-column-gap: 10px;
    -webkit-column-count: 5;
    -webkit-column-gap: 10px;
    column-count: 5;
    column-gap: 10px;
    width: 100%;
  }
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.1/bootstrap.min.js"></script>

<div class="row">

                   <div class="col-xs-6">
                       <p class="inntertopheading">heading</p>
                        <div class="hr"></div>
                        <div class="innter-md-text">
                            text
                       <div class="spacer10"></div>

                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                        </div>
                   </div>

                   <div class="col-xs-6">
                     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                   </div>
 <div class="col-xs-6">
                     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                   </div>
 <div class="col-xs-6">
                     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
                   </div>
               </div>
    Login or Signup to reply.
  2. 0

    vaibhav shah Hi there.
    To have each div block have the same Height no matter the content you could use a little jquery like this…

    $(document).ready( function(){
  var heightArray = $(".block1").map( function(){
         return  $(this).height();
     }).get();
  var maxHeight = Math.max.apply( Math, heightArray);
  $(".block2").height(maxHeight);
  $(".block3").height(maxHeight);  
 })

    Here is a working Fiddle.

    Does this help for what you are wanting here?

    If you resize the window with your mouse just refresh and see the div blocks change to all having the same height.

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search