How to center content in a container?

Hi, I have h1 and P that I want to place in the middle of a container by using Bootstrap but I wasn't able to do so.
I gave the

col

col

"margin: 0 auto" and that centered it to the top but I need the content in the middle. How can I do it?

<div class="container-fluid union">
    <div class="row align-items-center">
        <div class="col-6 align-items-center">
            <h1>
                ESCO
            </h1>
            <p>
                We belong to ESCO, an independent European organization that brings together companies and universities
                from the public and private sectors. The goal of this organization is to build and develop the European
                cybersecurity ecosystem.
            </p>
        </div>
    </div>
</div>

<div class="container-fluid union">
    <div class="row align-items-center">
        <div class="col-6 align-items-center">
            <h1>
                ESCO
            </h1>
            <p>
                We belong to ESCO, an independent European organization that brings together companies and universities
                from the public and private sectors. The goal of this organization is to build and develop the European
                cybersecurity ecosystem.
            </p>
        </div>
    </div>
</div>

Zoë•5/15/23, 8:34 AM

I don't know Bootstrap but it looks like col-6 is half width rather than half width and flex column.

When flex or grid isn't working it's worth looking at it in Firefox's inspector, you can click the flex and grid button to see what's happening, or if flex doesn't exist.

If you're new to web development, I have to recommend not using Bootstrap because they still use the antiquated 12 column method

Zoë•5/15/23, 8:42 AM

Please no

Mannix•5/15/23, 9:34 AM

center tag is deprecated

Jochem•5/15/23, 9:34 AM

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center

: The Centered Text element - HTML: HyperText Markup Language | MDN

The HTML element is a block-level element that displays its block-level or inline contents centered horizontally within its containing element. The container is usually, but isn't required to be, .

Jochem•5/15/23, 9:34 AM

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

Zoë•5/15/23, 10:38 AM

That's pretty much why, best not to recommend depreciated or unnecessary (*cough* Bootstrap) features when we have the tools to do it properly

duruiz•5/15/23, 4:58 PM

on bootstrap is a helper class for containers with .
what I think you are looking for is to add the class in your

row

row

duruiz•5/15/23, 4:59 PM

take a look:
https://codepen.io/eduruiz/pen/OJBwGaM

CodePenEdu Ruiz

center row in bs

...

Dduruiz take a look: https://codepen.io/eduruiz/pen/OJBwGaM

SoPHOP•5/16/23, 7:34 AM

Thank you for your help. I've reached the same result but my goal is to really place it in the middle of the container.

SoPHOP•5/16/23, 7:41 AM

I solved it. Simply added d-flex and to the container.

SSoPH Thank you for your help. I've reached the same result but my goal is to really p...

duruiz•5/16/23, 4:24 PM

oh, nice you solved it. at your first question I got the impression that you wanted it horizontally centered but you wanted it both horizontally and vertically centered, right?