Bootstrap panels not showing properly -

i generating panels dynamically.my plan render 4 panels in row like:

<div class="col-md-12">   <div class="col-md-3">panel 1</div>   <div class="col-md-3">panel 2</div>   <div class="col-md-3">panel 3</div>   <div class="col-md-3">panel 4</div>   <div class="col-md-3">panel 5</div>   <div class="col-md-3">panel 6</div> </div> 

however, panels rendering first row, on second row breaking can see pic

my actual code looks like:

if ($query->num_rows() > 0) {     foreach ($query->result_array() $row) {         $html.='<div class="col-md-3">';             $html.='<div class="panel panel-default">';                 $html.='<div class="panel-heading">'.$row['pr_student_name'].'</div>';                 $html.='<div class="panel-body">';                     $html.='<img src="'.site_url().'assets/admin/uploads/placement_img/'.$row['pr_student_photo'].'" alt="'.$row['pr_student_name'].'" alt="'.$row['pr_student_name'].'" class="img-responsive ops_img" width="80" height="80"/>';                 $html.='</div>';                 $html.='<div class="panel-footer">';                     $html.=$row['pr_placed_org'];                 $html.='</div>';             $html.='</div>';         $html.='</div>';     } }else{     $html.='<span style="color:red;">--no data found--</span>'; } 

please advise whats wrong code. using bootstrap v3.3.4. thanks.

you missing .row class

<div class="container-fluid">   <div class="row">     <div class="col-md-12">       <div class="row">          <div class="col-md-3">panel 1</div>         <div class="col-md-3">panel 2</div>         <div class="col-md-3">panel 3</div>         <div class="col-md-3">panel 4</div>       </div>       <div class="row">         <div class="col-md-3">panel 5</div>         <div class="col-md-3">panel 6</div>       </div>     </div>   </div> </div> 

always wrap column (.col) inside .row class in bootstrap.

hope you.