Spread out Bootstrap images with captions within a column - css

Question

I have a pricing comparison section of a Bootstrap 5 website, one column displays the images perfectly (without captions), however whenever I add a paragraph tag for the caption, the images stack on top of one another instead of staying inline in a row.
Here is the code for images without captions:
<div class="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-delay="150">
<div class="box">
<h3>Basic</h3>
<h4><sup>£</sup>4.50<span> / month</span></h4>
<ul>
<li><i class="bi bi-check-circle"></i>Web and mobile versions of Office apps only</li>
<li><i class="bi bi-check-circle"></i>Chat, call, meet up to 300 attendees</li>
<li><i class="bi bi-check-circle"></i>1 TB of cloud storage per user</li>
<li><i class="bi bi-check-circle"></i>Business-class email</li>
<li><i class="bi bi-check-circle"></i>Standard security</li>
<li><i class="bi bi-check-circle"></i>Anytime phone and web support</li>
</ul>
<p>Web and mobile apps and services:</p>
<img src="assets/img/Word_64x64.png" alt="" class="img-fluid">
<img src="assets/img/Excel_64x64.png" alt="" class="img-fluid">
<img src="assets/img/Outlook_64x64.png" alt="" class="img-fluid">
<img src="assets/img/PowerPoint_64x64.png" alt="" class="img-fluid">
<img src="assets/img/Microsoft_Teams_64x64.png" alt="" class="img-fluid">
<img src="assets/img/Outlook_64x64.png" alt="" class="img-fluid">
<img src="assets/img/Exchange_64x64.png" alt="" class="img-fluid">
<img src="assets/img/OneDrive_64x64.png" alt="" class="img-fluid">
<img src="assets/img/SharePoint_64x64.png" alt="" class="img-fluid">
<div class="btn-wrap">
Buy Now
</div>
</div>
</div>
Here is the code for images with captions:
<div class="col-lg-4 col-md-6 mt-4 mt-lg-0" data-aos="zoom-in" data-aos-delay="150">
<div class="box featured">
<h3>Premium</h3>
<h4><sup>£</sup>16.60<span> / month</span></h4>
<b><p>Everything in Business Standard, plus:</p></b>
<ul>
<li><i class="bi bi-check-circle white"></i>Advanced security
<li><i class="bi bi-check-circle white"></i>Access and data control
<li><i class="bi bi-check-circle white"></i>Cyberthreat protection</li>
<li><i class="bi bi-check-circle white"></i>Mobile device management</li>
</ul>
<p>Desktop, web, and mobile apps and services:</p>
<img src="assets/img/Excel_64x64.png" alt="" class="img-fluid"><p>Excel</p>
<img src="assets/img/Outlook_64x64.png" alt="" class="img-fluid"><p>Outlook</p>
<img src="assets/img/PowerPoint_64x64.png" alt="" class="img-fluid"><p>PowerPoint</p>
<img src="assets/img/Microsoft_Teams_64x64.png" alt="" class="img-fluid"><p>Teams</p>
<img src="assets/img/Outlook_64x64.png" alt="" class="img-fluid"><p>Outlook</p>
<img src="assets/img/Exchange_64x64.png" alt="" class="img-fluid"><p>Exchange</p>
<img src="assets/img/OneDrive_64x64.png" alt="" class="img-fluid"><p>OneDrive</p>
<img src="assets/img/SharePoint_64x64.png" alt="" class="img-fluid"><p>SharePoint</p>
<img src="assets/img/Access_64x64.png" alt="" class="img-fluid"><p>Access</p>
<img src="assets/img/Publisher_64x64.png" alt="" class="img-fluid"><p>Publisher</p>
<div class="btn-wrap">
Buy Now
</div>
</div>
</div>
What do I need to change to keep the icons inline?

Answer 1

Try wrapping your <img> and the <p> inside a <div>. Since <p> is a block-level element, meaning that any element after <p> will automatically be added to a new line.
Here's my example
<div>
<img/>
<span>your text here</span>
</div>
Also note that I'm changing <p> with <span>

Answer 2

Update code
To centre all the content
<div class="d-flex flex-wrap align-items-center justify-content-center">
...
</div>
Try to use the flex property of bootstrap
<div class="d-flex flex-column align-items-center justify-content-center">
<img/>
<p>your text here</p>
</div>
for more details check out the bootstrap doc[https://getbootstrap.com/docs/5.0/utilities/flex/]
and You can wrap all the image div with flex-wrap
<div class="d-flex flex-wrap">
...
</div>