How to center column

Centering a column in HTML is a common task in web design, ensuring a balanced and visually appealing layout. With our guide, you'll find it easy to center columns using the Bootstrap method.

Using Bootstrap

Bootstrap provides utility classes that simplify centering columns. This method is perfect for rapid development and ensures consistency.

In this example, we use Bootstrap's grid system and utility classes like d-flex and justify-content-center to center the column within its container.

        
            
        <div class="d-flex justify-content-center bg-body-tertiary">
          <div class="p-2 col-3">One of two columns</div>
          <div class="p-2 col-3">One of two columns</div>
        </div>
        
        
    

Using flexbox

Flexbox is a CSS layout model that allows for easy alignment and distribution of space among items in a container. Here’s how you can center a column using Flexbox:

• display: flex; makes the container a flex container.
• justify-content: center; centers the column horizontally.
• flex: 0 0 40%; makes the column take up 50% of the container’s width.

        
            
      <div style="display: flex; justify-content: center;">
        <div style="flex: 0 0 40%;">
          <p style="text-align: center;">Centered Column using Flexbox</p>
        </div>
      </div>