vertically center align text in second column with Bootstrap 4

2 replies
406 views
Translate

I am trying to get the text in the second column to center align vertically. I have tried a number of Bootstrap 4 properties on the second div with col-md... as you can see in rough example below: align-items-center is just one of a few I tried.

<div class="content-container">
<div class="row">

<div class="col">
<a href="/other/Document.pdf" target="_blank"><img class="img-fluid" src="/images/document-thumb-non-retina.jpg" srcset="/images/document-thumb-non-retina.jpg 1x, /images/document-thumb.jpg 2x" title="document"></a>
</div>

<div class="col-md align-items-center">
<h4 style="font-size: 1.25em; line-height: 1.35em;"><a href="/other/Document.pdf" target="_blank">Line of text as link.</a></h4>
</div>

</div>
</div>

This topic is closed to new replies. Start a new post to keep the conversation going.

Nancy OShea

Community Expert

For containers that are vertically centered, use Bootstrap Cards with these classes.

<div class="container">
<div class="row row-eq-height">

<!--BEGIN 3 COLUMNS -->
<div class="col-md-4 align-self-center">
<div class="card h-100"> 
<div class="card-body">
<h4 class="card-title">Heading 4</h4>
<p class="card-text">Some quick example text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div>

<div class="col-md-4 align-self-center">
<div class="card h-100"> 
<div class="card-body">
<h4 class="card-title">Heading 4</h4>
<p class="card-text">Some quick example text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat neque sit velit veniam suscipit obcaecati omnis ipsa aperiam molestiae sunt perspiciatis.</p>
</div>
</div>
</div>

<div class="col-md-4 align-self-center">
<div class="card h-100"> 
<div class="card-body">
<h4 class="card-title">Heading 4</h4>
<p class="card-text">Some quick example text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat neque sit velit veniam suscipit obcaecati omnis ipsa aperiam molestiae sunt perspiciatis, error nostrum aspernatur, veritatis hic rem cumque minus odit.</p>
</div>
</div>
</div>
</div>
<!--/container--></div>

Translate

Nancy O'Shea— Product User & Community Expert

O

osgood_

Legend

Nearly - add 'd-flex' as shown below:

<div class="col-md d-flex align-items-center">
<h4 style="font-size: 1.25em; line-height: 1.35em;"><a href="/other/Document.pdf" target="_blank">Line of text as link.</a></h4>
</div>

Translate

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.