[Bootstrap] Jumbotron

1. Jumbotron이란?

• Bootstrap 3에서 처음 도입된 특정 정보나 콘텐츠에 주목시키기 위한 큰 패딩 박스
• 하지만 Bootstrap 5에서는 공식적으로 Jumbotron 컴포넌트가 제거

✅ 대체 방법 (Bootstrap 5 방식)

Bootstrap 5에서는 Jumbotron 컴포넌트 대신,  `div`와 유틸리티 클래스를 조합하여 유사한 스타일을 만들 수 있음

<div class="mt-4 p-5 bg-primary text-white rounded">
  <h1>Jumbotron Example</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>

 

클래스	기능
`mt-4`	위쪽 마진 추가 (margin-top: 1.5rem)
`p-5`	안쪽 여백 크게 추가 (padding: 3rem)
`bg-primary`	배경색 파랑 (기본 Bootstrap primary 컬러)
`text-white`	글자색 흰색
`rounded`	모서리 둥글게 처리