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!
>Solution :
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>