Horizontally centering odd number of columns in Bootstrap 5 [duplicate] - css

Question

This question already has an answer here:
How can I center columns in Bootstrap 5?
(1 answer)
Closed 13 days ago.
I have some Bootstrap 5 columns with some text in them. This specific page has an odd number of columns (7) that need to be displayed on a desktop view like this:
4 columns (top row)
3 columns (bottom row)
The issue is that the bottom row should be centered, but since the previous row already has 4 columns that seems an impossible task with default Bootstrap 5 helpers.
Here's my current code (jsfiddle link):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="container">
<div class="row g-4">
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
</div>
</div>
And here is the visual comparisson of what's being displayed, and what's actually needed:
Any ideas on how to achieve this? Thanks!

Answer 1

Bootstrap 5 rows are flexbox containers. Simply use the appropriate flex alignment classes on the row to center the columns. justify-content-center does nicely.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="container">
<div class="row g-4 justify-content-center">
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
</div>
</div>