Bootstrap Jumbotron을 둥근 모서리 없이 화면 전체 너비로 확장하는 방법

Bootstrap의 Jumbotron은 기본적으로 컨테이너 안에 배치되면 좌우 여백이 생기고 모서리가 둥글게 처리됩니다. 하지만 웹사이트의 히어로(HERO) 섹션이나 메인 배너처럼 화면 가득 차는 영역을 만들고 싶다면, 구조를 조금만 바꾸면 됩니다.

전체 너비 Jumbotron의 핵심 원리

핵심은 .jumbotron 클래스를 모든 .container 클래스의 바깥쪽에 배치하고, 그 안에 다시 .container를 추가하는 것입니다. 이렇게 하면 Jumbotron 자체는 화면 전체 너비를 차지하면서 둥근 모서리 없이 각진 형태로 표시되고, 내부 콘텐츠만 컨테이너 안에서 깔끔하게 정렬됩니다.

예제 코드

아래 코드를 실행하면 둥근 모서리 없이 전체 너비로 확장된 Jumbotron을 직접 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
      <script src = "/scripts/jquery.min.js"></script>
      <script src = "/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class = "jumbotron">
         <div class = "container">
            <h1>Welcome to landing page!</h1>
            <p>Example for jumbotron.</p>
            <p>
               <a class = "btn btn-primary btn-lg" role = "button">
                  Click for more
               </a>
            </p>
         </div>
      </div>
   </body>
</html>

코드 동작 방식

.jumbotron: 회색 배경과 넉넉한 패딩을 제공하며, 컨테이너 밖에 위치하기 때문에 뷰포트 전체 너비를 차지합니다.
.container: 제목, 문단, 버튼 등 내부 콘텐츠가 화면 중앙에 정렬되도록 감싸는 역할을 합니다.
.btn btn-primary btn-lg: 크기가 큰 기본 스타일 버튼으로, 사용자의 클릭을 유도하는 CTA(Call To Action) 요소입니다.

위 방법은 Bootstrap 3 기준이며, Bootstrap 4 이상 버전에서는 .jumbotron-fluid 클래스를 사용해도 동일하게 가장자리까지 꽉 찬 Jumbotron을 만들 수 있습니다.