[Bootstrap] container 화면 크기가 꽉 차지 않을 때

<div class="container d-flex flex-column justify-content-center align-items-center text-center gap-3 min-vh-100">
        <h2 class="fs-2 fw-bolder">hello?</h2>
        <h5 class="fw-bolder">cheer up!</h5>
        <hr class="w-100" />
<button type="button" class="btn btn-primary">Get Started</button>
</div>

 

부트스트랩을 이용해 위와 같이 코드를 짜고 있었다.

처음에 화면 height가 꽉차질 않아서 무엇이 문제였나? 돌아보니..

 

 

1) min-vh-100 속성을 주었다. -> 미해결

2) h-100을 주고, html이나 body 혹은 상위 부모 tag <section>에게 vh-100도 줘보고 다 했었다. -> 미해결

3) 컨테이너에 min-vh-100과 justify-content-center를 동시에 주었다. -> 해결

 

flex-column 써놓고 justify-content-center를 까먹고 스택오버플로우나 뒤져본 나.. 나처럼 살지 마시오.