How to center text

Centering text is a common task in web design, and there are several ways to achieve it. This article will show you how to center text using CSS and Bootstrap. We'll provide ready-to-use examples to make it easy for you to integrate them into your projects.

Center Text with Bootstrap

How It Works:

• The text-center class in Bootstrap automatically sets the text-align: center; property for the element, centering the text horizontally.

        
            
        <div class="text-center">
          This text is centered using Bootstrap.
        </div>
          
        
    

Center Text with Bootstrap Flexbox

How It Works:

• d-flex makes the container a flexbox.
• justify-content-center centers the content horizontally.
• align-items-center centers the content vertically.
• h-25 makes the container take up 25% of the viewport height.

        
            
        <div class="d-flex justify-content-center align-items-center h-25">
          This text is centered using Bootstrap.
        </div>
          
        
    

Center Text with CSS

The text-align: center; style centers the text horizontally within its container.

        
            
          <div style="text-align: center;">
            This text is centered using CSS.
          </div>
          
        
    

Center Text with Flexbox

How It Works:

• display: flex; creates a flex container.
• justify-content: center; centers the content horizontally.
• align-items: center; centers the content vertically.
• height: 25vh; Makes the container take up 25% of the viewport height.

        
            
        <div style="display: flex; justify-content: center; align-items: center; height: 20vh;">
          This text is centered using Flexbox.
        </div>