0
vertically center align text in second column with Bootstrap 4
Enthusiast
,
/t5/dreamweaver-discussions/vertically-center-align-text-in-second-column-with-bootstrap-4/td-p/11780902
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
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting.
Learn more
LEGEND
,
/t5/dreamweaver-discussions/vertically-center-align-text-in-second-column-with-bootstrap-4/m-p/11781447#M208699
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>
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting.
Learn more
Community Expert
,
LATEST
/t5/dreamweaver-discussions/vertically-center-align-text-in-second-column-with-bootstrap-4/m-p/11781538#M208701
Jan 25, 2021
Jan 25, 2021
Copy link to clipboard
Copied
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 & Moderator
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting.
Learn more

