css - Aligning items on specific size don;'t work

Question

I am using bootstrap for my layout.

<div class="container-fluid footer">
    <div class="row p-4">
        <div class="col-lg-3 d-flex flex-column  justify-content-center align-items-md-center">
            <h3>Company</h3>
            <div class="mt-3 text-left">
                <div class="box">
                    <p class="link-router" routerLink="/careers">Careers</p>
                </div>
                <div class="box">
                    <p class="link-router" routerLink="/about-us"><a>About</a></p>
                </div>
                <div class="box">
                    <p class="link-router" routerLink="/contact-us">Contract us</p>
                </div>
            </div>
        </div>
    </div>
</div>

Here is for example one column in my row.The content of that column should be on the left ( default ) and centered vertically so for that i used

d-flex flex-column  justify-content-center

but now on smaller devices i want the content to be in the center, not in on the left.

So tried with the class

align-items-md-center

to tell that the content should be in the middle on > 768px devices.But then the whole time the content is in the middle not only on md devices.

How shoould i do that ?

question from:https://stackoverflow.com/questions/65869509/aligning-items-on-specific-size-dont-work

Answer 1

Youn need to use align-items-center align-items-md-start. You have centring by default and you reset the center on md (> 768px)

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
<div class="container-fluid footer">
    <div class="row p-4">
        <div class="col-lg-3 d-flex flex-column  justify-content-center align-items-center align-items-md-start">
            <h3>Company</h3>
            <div class="mt-3 text-left">
                <div class="box">
                    <p class="link-router" routerLink="/careers">Careers</p>
                </div>
                <div class="box">
                    <p class="link-router" routerLink="/about-us"><a>About</a></p>
                </div>
                <div class="box">
                    <p class="link-router" routerLink="/contact-us">Contract us</p>
                </div>
            </div>
        </div>
    </div>
</div>