CSS Bootstrap 4 - making multiple line row with equal columns - css

Question

I am trying to make a multiple line row with equal width columns with Bootstrap 4. This is the loop where I am creating this columns:
<div class="row video-section">
<div class="col-md-12">
#if(!(count($videos) > 0))
<p>{{ $player->first_name }} {{ $player->last_name }} has no videos yet.</p>
#else
#foreach($videos as $video)
<div class="col-md-3 profile-video-box">
<a href="/player/video/{{ $video->uid }}/{{ $video->player->fullName }}">
<div class="card bg-dark text-white">
<img src="{{ $video->getThumbnail() }}" class="card-img"/>
<div class="card-img-overlay">
<div class="play-icon-wrapper">
<i class="ion-ios-play"></i>
</div>
<div class="card-content">
<h5 class="card-title">{{ $video->title != '' ? $video->title : 'Untitled' }}
</h5>
<p class="card-text">{{ $video->created_at->diffForHumans() }}
</p>
</div>
</div>
</div>
</a>
</div>
#endforeach
</div>
</div>
But, then the each column takes up the whole row, since it gets the margin right to take up the rest of the space in the row. How can I fix that and create multiple line row?
Update
Here is the fiddle.

Answer 1

Try with this code and fiddle
<div class="row video-section ">
<div class="container">
<div class="row">
<div class="col-md-3 profile-video-box">
123
</div>
<div class="col-md-3 profile-video-box">
456
</div>
<div class="col-md-3 profile-video-box">
759
</div>
</div>
</div>
</div>

Answer 2

Don't use <div class="col-md-12"> inside your <div class="row video-section"> element. Instead confine <div class="col-md-12"> to only your <p> tag, like:
<div class="row video-section">
#if(!(count($videos) > 0))
<div class="col-md-12">
<p>{{ $player->first_name }} {{ $player->last_name }} has no videos yet.</p>
</div>
#else
#foreach($videos as $video)
<div class="col-md-3 profile-video-box">
<a href="/player/video/{{ $video->uid }}/{{ $video->player->fullName }}">
<div class="card bg-dark text-white">
<img src="{{ $video->getThumbnail() }}" class="card-img"/>
<div class="card-img-overlay">
<div class="play-icon-wrapper">
<i class="ion-ios-play"></i>
</div>
<div class="card-content">
<h5 class="card-title">{{ $video->title != '' ? $video->title : 'Untitled' }}
</h5>
<p class="card-text">{{ $video->created_at->diffForHumans() }}
</p>
</div>
</div>
</div>
</a>
</div>
#endforeach
</div>
Hope this helps!