How to make column in bootstrap 100% after vertically centering text? [duplicate] - html

Question

This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 1 year ago.
I am trying to vertically center my text content in the right column with bootstrap. However when I do that, the height of the column collapse to the height of the content like this.
How can I make the height of the right column the same as that on the left while vertically centering my text?
This is my HTML code:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-md mt-5 d-grid">
<div class="row gx-0"> <!--gx sets the gutter btw columns to 0-->
<div class="col-sm-8">
<img src="https://www.syfy.com/sites/syfy/files/wire/legacy/edge_of_tomorrow-wide.jpg" alt="Edge of Tomorrow" class="img-fluid" href="featured.html">
</div>
<div class="col-sm-4 bg-light align-self-center text-center">
<h1>Edge of Tomorrow</h1>
<div class="rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<p>It leaves you on the edge, wishing for a tomorrow. An epic action movie with twists and turns along the way.</p>
<button class="featured-button">Read more →</button>
</div>
</div>
</div>
</div>
</div>
Update:
Now I have set it to flex to vertically center my content which works perfectly. It looks like this now:
With the updated code:
<div class="container-md mt-5 featured">
<div class="row gx-0"> <!--gx sets the gutter btw columns to 0-->
<div class="col-md-7"> <!--col adds up to 12-->
<img src="images/edge-of-tomorrow.jpg" alt="Edge of Tomorrow" class="img-fluid featured-img" href="featured.html">
</div>
<div class="col-md-5 h-100 bg-light d-flex flex-column align-items-center justify-content-center text-center featured-content">
<h1>Edge of Tomorrow</h1>
<div class="rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<p>It leaves you on the edge, wishing for a tomorrow. An epic action movie with twists and turns along the way.</p>
<button class="btn btn-warning">Read more →</button>
</div>
</div>
</div>
<!--other content-->
<!--grid of cards-->
<div class="container card-deck mt-5"> <!--card deck so that it's equal height and width-->
<div class="row">
<div class="col-md-4">
<div class="card h-100">
<img class="card-img-top" src="images/500-days-of-summer.jpg" alt="500 Days of Summer">
<div class="card-body">
<h5 class="card-title">500 Days of Summer</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
But now the problem is when I minimise my screen, the content overlaps like this.
How can I prevent this from happening?

Answer 1

Instead of self-aligning the col-sm-4 to center, change it to a flex (column-wise). Then make everything center with: d-flex flex-column align-items-center justify-content-center. This will make it as you want.
Here's the fiddle (used a random image off the internet): JSFiddle
I added extra height to image just for the demo, you do not need to do that.

Answer 2

As a workaround, i would consider removing the img tag, and add a bg class to the div like this:
<div class="col-sm-8 bg"></div>
And in CSS Add:
.bg {
background-image: url("images/edge of tomorrow.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
object-fit: cover;
}
You can afterwards change the height of the image as you want, to display it in a proper way.
That worked for me, Hope this helped.

Answer 3

set the right column height to 100% with .h-100 bootstrap class.
Then set that right side column to position relative and wrap all the content inside a div(as u can see in my code).
-Than set that div to absolute and set it center with css as I did.
.content {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"></script>
<div class="container-md mt-5 d-grid">
<div class="row gx-0"> <!--gx sets the gutter btw columns to 0-->
<div class="col-sm-8">
<img src="https://images.unsplash.com/photo-1627850019941-9ca7769b314e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1868&q=80" alt="Edge of Tomorrow" class="img-fluid" href="featured.html">
</div>
<div class="col-sm-4 bg-light text-center h-100 position-relative">
<div class="content"><h1>Edge of Tomorrow</h1>
<div class="rating" style="
">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<p>It leaves you on the edge, wishing for a tomorrow. An epic action movie with twists and turns along the way.</p><button class="featured-button" style="
width: fit-content;
">Read more →</button>
</div>
</div>
</div>
</div>
</div>
</div>