How to make column in bootstrap 100% after vertically centering text?

Question

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"><a href="featured.html">Read more &#8594;</a></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"><a href="featured.html">Read more &#8594;</a></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?

the bg color makes it small . u can just give **bg-light** to the **row** — Amal nandan, Aug 02 '21 at 13:53

Siddharth Bhansali · Accepted Answer · 2021-08-03T15:30:34.390

2

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.

edited Aug 03 '21 at 15:30

answered Aug 02 '21 at 13:55

Siddharth Bhansali

2,017
2
10
19

This solution works, but when I minimise my screen the content below overlaps the container. How can I make it such that it doesn't overlap? I have updated my question to reflect this problem. Thank you :) – user1684750 Aug 02 '21 at 14:47
1

Okay, the culprit was `h-100` which also was kind of pointless since I used a flex. Removed it, updated the fiddle, please check. Also added a margin to show below the first picture on small screens so it looks better. – Siddharth Bhansali Aug 03 '21 at 05:36
Thank you, what a great solution, appreciate it! – user1684750 Aug 03 '21 at 15:01

score 0 · Answer 2 · answered Aug 02 '21 at 13:44

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.

score 0 · Answer 3 · edited Aug 02 '21 at 14:03

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;
"><a href="featured.html">Read more →</a></button>
</div>
                    
                    
                    
            </div>
        </div>
        </div>
    </div>
</div>

How to make column in bootstrap 100% after vertically centering text?

3 Answers3