CODEWITHSUNDEEP
twitter-bootstrap
gomesh munda
gomesh munda

Reputation: 850

Bootstrap panels not showing properly

I am generating some panels dynamically.My plan is to render 4 panels in a 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 properly for the first row, but on the second row its breaking up as you can see from the picenter image description here

My actual code looks like:

if ($query->num_rows() > 0) {
    foreach ($query->result_array() as $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 with my code. I am using Bootstrap v3.3.4. Thanks.

Upvotes: 0

Views: 555

Answers (2)

Shiladitya
Shiladitya

Reputation: 12181

You are 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 this will help you.

Upvotes: 1

Nithya Rajan
Nithya Rajan

Reputation: 4884

I think you should change ur parent container from col-md-12 to 

<div class="row">

. Try it..

Upvotes: 0

Related Questions