html - Masonry plugin not working -

i have started use masonry plugin cannot work. below picture of problem.

as can see not desired effect. below code using:

content

    <div class="container" id="reviews">   <div class="row">     <div class="comment-block">       <div class="new-comment"></div>         <?php            while($row = mysqli_fetch_array($result)) {             $data = mysqli_fetch_array(mysqli_query($con, "select first_name, last_name transactions order_id = '{$row['order_id']}'"));             $name = $data['first_name']. ' '. mb_substr($data['last_name'], 0, 1);             if($row['rating'] == 5) $star = '<span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span>';              if($row['rating'] == 4) $star = '<span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span>';              if($row['rating'] == 3) $star = '<span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span>';              if($row['rating'] == 2) $star = '<span class="glyphicon glyphicon-star review_star"></span><span class="glyphicon glyphicon-star review_star"></span>';              if($row['rating'] == 1) $star = '<span class="glyphicon glyphicon-star review_star"></span>';            ?>           <div class="col-md-4">             <div id="box_review">               <h3><?php echo $star; ?></h3>               <h5 class="thin"><?php echo $row['date'] ?></h5>               <blockquote>                 <p><?php echo $row['comment'] ?></p>                 <footer><?php echo $name ?></footer>               </blockquote>             </div>            </div>         <?php } ?>     </div><!-- ./ comments block -->   </div><!-- ./ row --> </div><!-- ./ container --> 

masonry

    $(document).ready(function() {   $('#reviews').masonry({    columnwidth: 400,    itemselector: '#box_review'   }).imagesloaded(function() {    $('#reviews').masonry('reload');   }); }); 

please can me doing wrong? using bootstrap grid system way not sure if might problem. thanks.

you should apply bootstrap's col-md-x classes blocks because explicitly telling masonry minimal width of blocks 400 pixels , bootstrap's col-md-x can vary depending on screen's resolution.

1. define minimum width of blocks (just old 960 grid system 16 columns (which means 60 pixels minimum). 400 pixels seems lot, no ? let's 100px.
2. define new class, let's .masonry-normal-grid , apply blocks.

in css, create

.masonry-normal-grid {     width:300px; } 

you can create .masonry-small-grid or .masonry-large-grid long thecolumnwidth defined in javascript represents lowest width of classes (you should not have css class width smaller javascript attribute columnwidth).

important : id must unique ! rename <div id="box_review"> <div class="box_review"> (and change in javascript attribute #box_review .box_review too)

note : should if elseif instead of if (or switch(case)).