Vertical align with bootstrap not working

Garrett

Maybe I don't have it setup right? I've been looking at code for the past 3 hours so it's possible I'm over looking something. Either way I have this h3 in a div and I want it to be centered both horizontally and vertically, however only horizontal is working.

<div class="col-md-4">
    <div class="align-items-center" style="background-image:url({{ uni.u_homepage_pic.url }}); background-repeat:no-repeat; width: 350px; height: 225px;">
        <h3 class="text-center" style="color:#ffffff;">{{ uni.u_name }</h3>
    </div>
</div>

Update: Using Bootstrap V4

user7207170

.align-items-center {
  display: flex; 
  align-items: center;  /*Aligns vertically center */
  justify-content: center; /*Aligns horizontally center */
}
<div class="col-md-4">
  <div class="align-items-center" style="background:red; width: 350px; height: 225px;">
    <h3 class="text-center" style="">Hello</h3>
  </div>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related