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.
Comments
Post a Comment