Revision history [back]

There are a few ways to add additional centered content to Bootstrap 5 images:

1. Using the Bootstrap grid system: You can use the Bootstrap grid system to create a row and column layout around the image, and then add any additional content as a separate column within the same row. For example:

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <img src="example.jpg" class="img-fluid" alt="example">
    </div>
    <div class="col-md-6 d-flex align-items-center">
      <h2>Heading</h2>
      <p>Additional content here</p>
    </div>
  </div>
</div>

In this example, the image takes up half of the row, and the additional content takes up the other half. The d-flex align-items-center class centers the content vertically within the column.

1. Using CSS: You can also use CSS to position additional content on top of the image or at a specific location near the image. For example:

<div class="container">
  <div class="position-relative">
    <img src="example.jpg" class="img-fluid" alt="example">
    <div class="position-absolute top-50 start-50 translate-middle">
      <h2>Heading</h2>
      <p>Additional content here</p>
    </div>
  </div>
</div>

In this example, the additional content is positioned over the image using the position-absolute class. The top-50 start-50 translate-middle classes center the content both vertically and horizontally within the container div.