• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

vertically center align text in second column with Bootstrap 4

Enthusiast ,
Jan 25, 2021 Jan 25, 2021

Copy link to clipboard

Copied

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>

 

TOPICS
Bootstrap , Code , How to

Views

174

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 25, 2021 Jan 25, 2021

Copy link to clipboard

Copied

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>

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 25, 2021 Jan 25, 2021

Copy link to clipboard

Copied

LATEST

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

image.png

 

 

<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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines