I am trying to keep 3 bootstrap cards with 3 columns but it keeps large blank space on right. I have tried to keep it in center but failed. I want to keep in center, please help.
see the image for idea link: https://ibb.co/t4wYwnb
codes
<div class="container-fluid">
<div class="row" style="margin-top: 4%">
<!-- Blog Entries Column -->
<!--<div class="col-xs-12 col-sm-12 col-md-4 col-lg-3"> -->
<!-- Blog Post -->
<?php
if (isset($_GET['pageno'])) {
$pageno = $_GET['pageno'];
} else {
$pageno = 1;
}
$no_of_records_per_page = 8;
$offset = ($pageno-1) * $no_of_records_per_page;
$total_pages_sql = "SELECT COUNT(*) FROM tblposts";
$result = mysqli_query($con,$total_pages_sql);
$total_rows = mysqli_fetch_array($result)[0];
$total_pages = ceil($total_rows / $no_of_records_per_page);
$stmt = $DB_con->prepare("select tblposts.id as pid,tblposts.PostTitle as posttitle,tblposts.PostImage,tblcategory.CategoryName as category,tblcategory.id as cid,tblsubcategory.Subcategory as subcategory,tblposts.PostDetails as postdetails,tblposts.PostingDate as postingdate,tblposts.PostUrl as url from tblposts left join tblcategory on tblcategory.id=tblposts.CategoryId left join tblsubcategory on tblsubcategory.SubCategoryId=tblposts.SubCategoryId where tblposts.Is_Active=1 order by tblposts.id desc LIMIT {$offset}, {$no_of_records_per_page}");
$stmt->execute();
/*$query=mysqli_query($con,"select tblposts.id as pid,tblposts.PostTitle as posttitle,tblposts.PostImage,tblcategory.CategoryName as category,tblcategory.id as cid,tblsubcategory.Subcategory as subcategory,tblposts.PostDetails as postdetails,tblposts.PostingDate as postingdate,tblposts.PostUrl as url from tblposts left join tblcategory on tblcategory.id=tblposts.CategoryId left join tblsubcategory on tblsubcategory.SubCategoryId=tblposts.SubCategoryId where tblposts.Is_Active=1 order by tblposts.id desc LIMIT $offset, $no_of_records_per_page");*/
if($stmt->rowCount() > 0)
//$stmt = $stmt->fetchall(PDO::FETCH_ASSOC);
{
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
extract($row);
?>
<!--news for the desktop view in 3 column starts, col-xs-12 col-sm-6 col-md-4 col-lg-3 makes columns responsive -->
<div class="row col-xs-12 col-sm-12 col-md-4 col-lg-3" style="margin-left: 1px; margin-right: 1px; margin-top: 3px; margin-bottom: 3px;"> <!-- added by sumon test was: col-lg-4 col-md-6-->
<div class="card"> <!--<div class="col-4">-->
<!-- image of the card -- starts -->
<a href="news-details.php?nid=<?php echo htmlentities($row['pid'])?>"> <!-- news link starts -->
<img class="card-img-top" src="admin/postimages/<?php echo htmlentities($row['PostImage']);?>" alt="<?php echo htmlentities($row['posttitle']);?>">
<!-- image of the card -- ends -->
<div class="card-body">
<h6 class="card-title"><?php echo htmlentities($row['posttitle']);?>
<!-- catagory name starts-->
<br><a href="category.php?catid=<?php echo htmlentities($row['cid'])?>"><?php echo htmlentities($row['category']);?></a>
<!-- catagory name stops-->
</h6>
<!--<p><b>Category : </b> <span></span> <a href="category.php?catid=<?php echo htmlentities($row['cid'])?>"><?php echo htmlentities($row['category']);?></a></span> </p>-->
</a> <!-- news links ends -->
<!--<a href="news-details.php?nid=<?php echo htmlentities($row['pid'])?>" class="btn btn-primary">Read More →</a>-->
</div>
<div class="card-footer text-muted">
Posted on <?php echo htmlentities($row['postingdate']);?>
</div>
</div>
</div>
<?php } }?>
<!-- Sidebar Widgets Column -->
<?/*php include('includes/sidebar.php');
*/
?>
</div>