Problem Aligning Content with CSS

Question

You can see directly on the website at this link: http://www.cinepophd.ml/index.php?browse/playseries/1/1

Can anyone tell me why the episode grid is getting like this:

The code I’m using is:

 <div class="row">

    <?php

    $counter    =   0;

    $episodes   =   $this->crud_model->get_episodes_of_season($season_id);

    foreach ($episodes as $row2):

    ?>

    <div class="col-md-3">

    <a href="#" onclick="jwplayer().playlistItem(<?php echo $counter++;?>)">

    <img src="<?php echo $this->crud_model->get_thumb_url('episode' , $row2['episode_id']);?>" 

    style="height: 150px; margin-top:10px;" /></a>

    <br>

    <h5><?php echo $row2['title'];?></h5>

    </div>

    <?php endforeach;?>

    </div>

And at the beginning of the page has a css with this code:

	.movie_thumb{}
	
.btn_opaque{font-size:20px; border: 1px solid #939393;text-decoration: none;margin: 10px;background-color: rgba(0, 0, 0, 0.74); color: #fff;}
	
.btn_opaque:hover{border: 1px solid #939393;text-decoration: none;background-color: rgba(57, 57, 57, 0.74);color:#fff;}
	
.video_cover {position: relative;padding-bottom: 30px;}
	
.video_cover:after {
	content : "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url(<?php echo $this->crud_model->get_poster_url('series' , $row['series_id']);?>); 
	width: 100%;
	height: 100%;
	opacity : 0.2;
	z-index: -1;
	background-size:cover;
	}
	
.select_black{background-color: #000;height: 45px;padding: 12px;font-weight: bold;color: #fff;}
	
.profile_manage{font-size: 25px;border: 1px solid #ccc;padding: 5px 30px;text-decoration: none;}
	
.profile_manage:hover{font-size: 25px;border: 1px solid #fff;padding: 5px 30px;text-decoration: none;color:#fff;}

Answer 1

How did I respond in:

• Side by side in Bootstrap, jumping line
• Prevent line breaking (encavalating) in col-Md bootstrap

The sum of all cols should always be 12, for example:

• If you have 4 Divs with the class .col-*-3 then the sum will be 12 (3+3+3+3 = 12)
• If you have 3 Divs with the class .col-*-4 then the sum will be 12 (4+4+4 = 12)
• Can also do .col-*-6+.col-*-3+.col-*-3 for example (6+3+3=12)

In your code, there are 5 columns, ie 5 (colunas) * 3 (col-md-3) = 15, passing the 12 limit.

The solution is either to limit to 4 columns (4*3=12) or to use col-md-2 (2*5=10), would even put 6 columns, or compensate the space with col-*-offset-*

Answer 2

You can create a new .row every 4 columns. You can use the variable $counter = 0; inside the loop to create a new .row.

For that, add this if at the end of the loop foreach:

if($counter%4 == 0){
   echo '</div><div class="row dvd">';
}

The if checks whether the $counter is a multiple of 4 and inserts a new .row closing the previous.

The code would look like this:

<div class="row">
   <?php
   $counter    =   0;
   $episodes   =   $this->crud_model->get_episodes_of_season($season_id);

   foreach ($episodes as $row2):
   ?>

   <div class="col-md-3">
      <a href="#" onclick="jwplayer().playlistItem(<?php echo $counter++;?>)">
         <img src="<?php echo $this->crud_model->get_thumb_url('episode' , $row2['episode_id']);?>" style="height: 150px; margin-top:10px;" />
      </a>
      <br>
      <h5><?php echo $row2['title'];?></h5>
   </div>
   <?php
      if($counter%4 == 0){
        echo '</div><div class="row">';
      }
   endforeach;
   ?>
</div>