How to center bootstrap columns so there will not be any empty space on right?


#1

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 &rarr;</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>

#2

I’m not sure how you want the result to be

If the row is 12 columns and you have 3 cards that are 3 columns wide each, what do you want to do with the last 3 columns?


#3

Thank you sir. adding style="margin-left: auto; margin-right: auto; solved the problem.