How can I center text and images vertically across columns with Bootstrap 5?

Question

I don't have any padding on my text but for some reason there is an unnecessary amount of padding that causing my text to shift to the top right. I tried using Bootstrap to align items and justify the contact but I'm still having trouble figuring out what is causing the shift. Since I can't attach an image this is what I'm trying to achieve here is an example: https://cdn.optinmonster.com/wp-content/uploads/2020/11/Social-featured-image-How-to-Create-a-Landing-Page.jpg

I want my text/h3/p/button to be centered with the image.

.name,
.intro {
  color: rgba(12, 11, 11, 0.6);
}

.name {
  font-size: 40px;
  font-weight: 700;
  font-family: 'DM Sans';
}

.intro {
  width: 525px;
  height: 107px;
  font-family: 'Ek Mukta';
  font-size: 25px;
  line-height: 40px;
}

#icon {
  margin: 10px;
  display: inline-block;
  width: 300px;
  height: 420px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container align-items-center justify-content-center">
  <div class="row justify-content-center ">
    <div class="col-md-6">
      <h3>Hi, I'm Ashley &#128075;</h3>
      
      <p class="intro">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem a, debitis, totam aa dddddd ddddd ddd aaaaaaaaa. </p>

      <br>
      <a href="projects.html"><button id="checkout-projects">Check out my projects!</button></a>
    </div>

    <div class="col-md-6">
      <img id="icon" src="https://via.placeholder.com/420x300" class="img-fluid">
    </div>
  </div>
</div>

Protip: Don't use line breaks for spacing. That's not what they're for. Use Bootstrap's [spacing utilities](https://getbootstrap.com/docs/5.1/utilities/spacing/) or wrap your content in suitable elements, such as paragraphs. — isherwood, May 31 '22 at 18:20
Protip: Buttons should never be inside anchors. They have different functions and must not be combined. You can style anchors as buttons with Bootstrap's [button classes](https://getbootstrap.com/docs/5.1/components/buttons/) if that's your goal. — isherwood, May 31 '22 at 18:23

score -1 · Accepted Answer · answered May 31 '22 at 18:27

You want align-items-center on the row, which affects the flexbox cross-axis for its child elements. I suggest getting to know flexbox better via the Bootstrap flex docs and the CSS Tricks guide.

.name,
.intro {
  color: rgba(12, 11, 11, 0.6);
}

.name {
  font-size: 40px;
  font-weight: 700;
  font-family: 'DM Sans';
}

.intro {
  width: 525px;
  height: 107px;
  font-family: 'Ek Mukta';
  font-size: 25px;
  line-height: 40px;
}

#icon {
  margin: 10px;
  display: inline-block;
  width: 300px;
  height: 420px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container">
  <div class="row align-items-center">
    <div class="col-md-6">
      <h3>Hi, I'm Ashley &#128075;</h3>
      
      <p class="intro">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem a, debitis, totam aa dddddd ddddd ddd aaaaaaaaa. </p>

      <br>
      <a href="projects.html"><button id="checkout-projects">Check out my projects!</button></a>
    </div>

    <div class="col-md-6">
      <img id="icon" src="https://via.placeholder.com/420x300" class="img-fluid">
    </div>
  </div>
</div>

How can I center text and images vertically across columns with Bootstrap 5?

1 Answers1