There are a few ways to add additional centered content to Bootstrap 5 images:
<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.
<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.
Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss
Asked: 2021-12-08 11:00:00 +0000
Seen: 18 times
Last updated: May 07 '22
In what way is Bootstrap v4 loading the _reboot.scss file?
How can Bootstrap 5 be modified to utilize solely the grid and buttons components?
How can Bootstrap tables have several rows and columns?
How does the "row" in Bootstrap 3.3.7 lead to the appearance of a horizontal scroll bar?
How can a new line be added on small devices using Bootstrap?
Is it possible to incorporate multiple versions of Bootstrap within a single code?
What is the solution for aligning input vertically in different rows with Bootstrap 5?
How can Bootstrap 5 be utilized in conjunction with Vue 3?
What is the method to create a flex box that has a maximum of 2 elements per row?