Question 60910 in Html Question posted in
Some basic documentation can be found here.

How to center the text vertically using bootstrap – Html

I’m creating a portfolio using bootstrap. For some reasons i can’t get the text vertically centered. i have tried align-items-center and justify-content-center with no luck. Here is the code:

<div class="cover-container d-flex h-100 p-3 flex-column">
    <h1 style="font-weight: 650;">I'm <span style="color: #2075b6">ABC</span></h1>
    <h3>I'm a XYZ</h3>
</div>

I tried using align-items-center and justify-content-center with no luck.

Tags:

2

Answers


  1. 0 
    <div class="container">
  <div class="row align-items-center" style="min-height: 300px;">
      <div class="col-12 text-center">
         <h1 style="font-weight: 650;">I'm <span style="color: #2075b6">ABC</span></h1>
         <h3>I'm a XYZ</h3>
      </div>
  </div>
</div>

    First create a container div for grid system in order to center the content. Then create a row and center the content vertically within the row using the ‘align-items-center’ class. Also create a column within the row and center the content horizontally using the ‘text-center’class. Note that the min-height property ensures that the row has a minimum height, which allows the content to be centered both vertically and horizontally regardless of the height of the content.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search