Kevin Powell - Community•14mo ago

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 "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>

12 Replies

Zoë•14mo ago

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

Unknown User•14mo ago

Message Not Public

Zoë•14mo ago

Please no

Unknown User•14mo ago

Message Not Public

Mannix•14mo ago

center tag is deprecated 😉

Jochem•14mo ago

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•14mo ago

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ë•14mo ago

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•14mo ago

align-items-center on bootstrap is a helper class for containers with display: flex. what I think you are looking for is to add the class justify-content-md-center in your row

duruiz•14mo ago

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

Edu Ruiz

CodePen

center row in bs

...

Ilan•14mo ago

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. I solved it. Simply added d-flex and align-items-center to the container.

duruiz•14mo ago

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?

Gaming

Programming

How to center content in a container?