I am creating a web page where i want to show multiple rows of images. I am using Bootstrap 3.3.7 and have the following code. What is happening is that when using a col-md3, the last images are not show correctly. I want to have them in the same row, starting from left to right, but they are in the middle of the screen or some other place.
<div class="staff-picked-posts padding-top-70 background-color-gray padding-bottom-40" id="chennal-page">
<div class="container">
<div class="tab-content">
<div class="slide tab-pane active" id="l">
<div class="">
<div class="item active">
<div class="row">
<ul class="staff-picked-videos">
<li class="col-md-3 col-sm-4 col-xs-12">
<div class="post-details">
<div class="overlay-inner-image">
<img src="http://ift.tt/2pzxEkg" alt="">
<a a="" class="inner-image-overlay" href="/Home/Detail/41/these-athletes-are-incredibly-angry-want-to-check-out-their-reactions"></a>
<div class="watch-icon" data-toggle="tooltip" title="" data-original-title="Watch Later">
<a href=""><i class="fa fa-clock-o" aria-hidden="true"></i></a>
</div>
</div>
<div class="image-content background-color-light-green">
<h3><a href="/Home/Detail/41/these-athletes-are-incredibly-angry-want-to-check-out-their-reactions">These athletes are incredibly angry. Want to check out their reactions?</a></h3>
<!--<p>kocco.co<i class="fa fa-check-circle-o trending-post"></i></p>-->
<p class="margin-bottom-0">4/30/2017 <span><i class="fa fa-eye"></i> 0 </span><i class="fa fa-thumbs-o-up"></i> 0</p>
</div>
</div>
</li>
<li class="col-md-3 col-sm-4 col-xs-12">
<div class="post-details">
<div class="overlay-inner-image">
<img src="http://ift.tt/2papDQa" alt="">
<a a="" class="inner-image-overlay" href="/Home/Detail/44/most-shocking-boxing-moments-want-to-check"></a>
<div class="watch-icon" data-toggle="tooltip" title="" data-original-title="Watch Later">
<a href=""><i class="fa fa-clock-o" aria-hidden="true"></i></a>
</div>
</div>
<div class="image-content background-color-light-green">
<h3><a href="/Home/Detail/44/most-shocking-boxing-moments-want-to-check">Most Shocking Boxing moments. Want to check? </a></h3>
<!--<p>kocco.co<i class="fa fa-check-circle-o trending-post"></i></p>-->
<p class="margin-bottom-0">4/30/2017 <span><i class="fa fa-eye"></i> 0 </span><i class="fa fa-thumbs-o-up"></i> 0</p>
</div>
</div>
</li>
<li class="col-md-3 col-sm-4 col-xs-12">
<div class="post-details">
<div class="overlay-inner-image">
<img src="http://ift.tt/18agLjG" alt="">
<a a="" class="inner-image-overlay" href="/Home/Detail/45/top-10-crazy-moments-in-sports"></a>
<div class="watch-icon" data-toggle="tooltip" title="" data-original-title="Watch Later">
<a href=""><i class="fa fa-clock-o" aria-hidden="true"></i></a>
</div>
</div>
<div class="image-content background-color-light-green">
<h3><a href="/Home/Detail/45/top-10-crazy-moments-in-sports">Top 10 Crazy Moments in Sports </a></h3>
<!--<p>kocco.co<i class="fa fa-check-circle-o trending-post"></i></p>-->
<p class="margin-bottom-0">4/30/2017 <span><i class="fa fa-eye"></i> 0 </span><i class="fa fa-thumbs-o-up"></i> 0</p>
</div>
</div>
</li>
<li class="col-md-3 col-sm-4 col-xs-12">
<div class="post-details">
<div class="overlay-inner-image">
<img src="http://ift.tt/2paNiQi" alt="">
<a a="" class="inner-image-overlay" href="/Home/Detail/46/top-20-funny-moments-in-soccer"></a>
<div class="watch-icon" data-toggle="tooltip" title="" data-original-title="Watch Later">
<a href=""><i class="fa fa-clock-o" aria-hidden="true"></i></a>
</div>
</div>
<div class="image-content background-color-light-green">
<h3><a href="/Home/Detail/46/top-20-funny-moments-in-soccer">Top 20 funny moments In Soccer </a></h3>
<!--<p>kocco.co<i class="fa fa-check-circle-o trending-post"></i></p>-->
<p class="margin-bottom-0">4/30/2017 <span><i class="fa fa-eye"></i> 0 </span><i class="fa fa-thumbs-o-up"></i> 0</p>
</div>
</div>
</li>
<li class="col-md-3 col-sm-4 col-xs-12">
<div class="post-details">
<div class="overlay-inner-image">
<img src="http://ift.tt/2pz58zk" alt="">
<a a="" class="inner-image-overlay" href="/Home/Detail/50/ronaldinho-making-amazing-plays-in-soccer"></a>
<div class="watch-icon" data-toggle="tooltip" title="" data-original-title="Watch Later">
<a href=""><i class="fa fa-clock-o" aria-hidden="true"></i></a>
</div>
</div>
<div class="image-content background-color-light-green">
<h3><a href="/Home/Detail/50/ronaldinho-making-amazing-plays-in-soccer">Ronaldinho making amazing plays in soccer. </a></h3>
<!--<p>kocco.co<i class="fa fa-check-circle-o trending-post"></i></p>-->
<p class="margin-bottom-0">4/30/2017 <span><i class="fa fa-eye"></i> 0 </span><i class="fa fa-thumbs-o-up"></i> 0</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Aucun commentaire:
Enregistrer un commentaire