Skip to main content
R
r_tist
Inspiring
January 25, 2021
Question

vertically center align text in second column with Bootstrap 4

  • January 25, 2021
  • 2 replies
  • 371 views

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 has been closed for replies.

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
January 25, 2021

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>

 

 

Nancy O'Shea— Product User & Community Expert
O
osgood_
Legend
January 25, 2021

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>

 

 

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices