Bootstrap Carousel not working properly - displays all elements -

i have following code:-

        <div id="postcarousel" class="carousel slide" data-ride="carousel">             <div class="carousel-inner">                 <div id="house-type-wrapper">                     <h2><?php echo the_field('development_title'); ?> house types</h2>                     <div id="latest-development">                         <?php                         if ( $properties_query->have_posts() ) :                         $i = 0;                         while ( $properties_query->have_posts() ) : $properties_query->the_post();                         $i++;                         if ( $i == 1 ) {                             echo '<div class="item active row">';                         }                             echo '<div id="column-wrap">';                             echo '<div class="col-md-4">';                             $house_type = get_field('housetype')->id;                             echo (get_the_post_thumbnail($house_type, 'full')); ?>                         <div class="house-developments development-details">                             <h3 class="pull-left"><?php the_title(); ?></h3>                             <strong><p class="txt-plot pull-right">plot <?php the_field('plot_no'); ?></p></strong>                             <div class="clearfix"></div>                             <p class="txt-description"><?php the_field('short_description', $house_type); ?></p>                             <h3 class="txt-property-price pull-left">£<?php the_field('price'); ?></h3>                             <a href="<?php get_post_permalink() ?>"><span class="btn pull-right">click view</span></a>                         </div>                           <?php                         echo '<div class="clearfix"></div>';                         echo '</div>';                           if ( $i % 3 == 0 && $i != 8 ) { echo '</div><div class="item">'; }                         endwhile;                         echo '</div>';                         wp_reset_postdata();                         endif;                         ?>                      </div>                 </div>                        </div>          <a class="left carousel-control" href="#postcarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>         <a class="right carousel-control" href="#postcarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>          </div> 

this should display 1 row of 3 x col-md-4

at moment displaying 9 results causing carousel not function.

i have working following function:-

<?php  $args = array( 'posts_per_page' => 12,                'offset' => 1 );  $the_query = new wp_query( $args );  if ( $the_query->have_posts() ) : $i = 0; while ( $the_query->have_posts() ) : $the_query->the_post(); $i++; if ( $i == 1 ) {     echo '<div class="item active row">'; }     echo '<div id="column-wrap">';     echo '<div class="col-md-4">';     echo '<div class="post-carousel"><a href="'.get_post_permalink().'">';     the_post_thumbnail('medium').'</a>';     $content = get_the_content();     echo '<h3><a href="'.get_post_permalink().'">'.get_the_title().'</a></h3>';     echo '<p>'.wp_trim_words($content, 20).'</p>';     echo '<span class="post-glyphicon"><a href="'.get_post_permalink().'"><span class="glyphicon glyphicon-chevron-right pull-right"></span></a></span>';     echo '<div class="clearfix"></div>';     echo '</div>';     echo '</div>';     echo '</div>';      if ( $i % 3 == 0 && $i != 12 ) { echo '</div><div class="item">'; }     endwhile;     echo '</div>';      wp_reset_postdata();     endif; ?> 

i can't understand wrong first example? ideas?

found solution in end, placement of few of divs, works expected now:-

       <div id="developments-carousel" class="carousel slide" data-ride="carousel">             <div class="carousel-inner">             <?php             if ( $properties_query->have_posts() ) :             $i = 0;             while ( $properties_query->have_posts() ) : $properties_query->the_post();             $i++;             if ( $i == 1 ) {                 echo '<div class="item active">';             }                 echo '<div id="column-wrap">';                 echo '<div class="col-md-4 row">';                 $house_type = get_field('housetype')->id;                 $the_price = get_field('price');                 echo (get_the_post_thumbnail($house_type, 'full')); ?>                  <div id="house-type-wrapper" class="marginb30">                     <div id="latest-development">                         <div class="house-developments development-details">                             <h3 class="pull-left"><?php the_title(); ?></h3>                             <strong><p class="txt-plot pull-right">plot <?php the_field('plot_no'); ?></p></strong>                             <div class="clearfix"></div>                             <p class="txt-description"><?php the_field('short_description', $house_type); ?></p>                             <h3 class="txt-property-price pull-left">£<?php echo number_format($the_price); ?></h3>                             <a href="<?php echo get_post_permalink(); ?>"><span class="btn pull-right">click view</span></a>                             <div class="clearfix"></div>                         </div>                     </div>                 </div>                <?php             echo '<div class="clearfix"></div>';             echo '</div>';             echo '</div>';               if ( $i % 3 == 0 && $i != 12 ) { echo '</div><div class="item">'; }             endwhile;             echo '</div>';             wp_reset_postdata();             endif;             ?>              </div>          <a class="left carousel-control" href="#developments-carousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>         <a class="right carousel-control" href="#developments-carousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>          </div>