[Bootstrap] Footer 화면 하단에 배치(고정)하기

 

Bootstrap으로 화면 제작 시 데이터 양이 부족하여 페이지를 체우지 못하는 경우 footer(푸터)가 딸려 올라오는 현상이 발생합니다.

 

일반적인 HTML 코드에서는 css에서 display 속성을 변경하여 수정이 가능하지만, Bootstrap(부트스트랩)이 적용되어 있는 경우 제대로 변경되지 않는 현상이 발생합니다.

 

대신 Bootstrap의 문법을 이용하여 일반적인 html 코드의 css를 수정하듯이 변경이 가능합니다.

 

 

- 수정 코드

body class에 [ d-flex flex-column min-vh-100 ] 추가

footer class에 [ mt-auto ] 추가

 

 

기본적인 개념은 html에서 footer를 하단에 다는 방식과 유사하다고 보시면 됩니다.

 

body의 display를 flex로 변경하고 화면의 전체 높이가 100%보다 작을 때 body의 크기를 강제로 100%로 늘려줍니다. 

 

footer의 margin top을 auto로 하면 자동으로 아래에 footer가 붙습니다.