예제로 배우는 부트스트랩 컨테이너(3): .container와 .container-fluid 완벽 가이드

컨테이너(Container)는 이름 그대로 무언가를 담거나 감싸는 역할을 하는 요소입니다. 부트스트랩에서 컨테이너는 뷰포트(viewport) 위에 콘텐츠를 담아 정렬하고 배치하는 기능을 합니다. 컨테이너는 뷰포트의 네 방향에 여백을 두어 콘텐츠에 패딩(padding)을 추가하며, 필요에 따라 이 값을 얼마든지 조정할 수 있습니다. 또한 컨테이너 안에 다른 컨테이너를 중첩(nested)시켜 사용할 수도 있습니다.

그럼 지금부터 부트스트랩에서 제공하는 주요 컨테이너 클래스가 각각 어떤 특징을 가지고 있는지 하나씩 자세히 살펴보겠습니다.

.container 클래스

부트스트랩에서 .container 클래스는 뷰포트 안에 고정된 최대 너비(max-width)를 가진 반응형 컨테이너를 생성합니다. 뷰포트 크기에 따라 컨테이너의 max-width가 단계적으로 조정되며, 각 화면 크기 구간에서는 일정한 폭을 유지합니다.

아래 표는 뷰포트 크기별 .container 클래스의 max-width 값을 나타낸 것입니다.

	초소형(XS)	소형(SM)	중형(MD)	대형(LG)	초대형(XL)
max-width	100%	540px	720px	960px	1140px

예제

다음 예제를 통해 좀 더 쉽게 이해해 보겠습니다.

<html>
<head>
<title>.Container Class</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body style="border:5px solid Black;">
<br>
<div class="container bg-dark text-white" style>
<center>
<h1>tutorialspoint</h1>
<h6>SIMPLYEASYLEARNING</h6>
</center>
</div>
</body>
</html>

출력 결과

위 코드의 실행 결과는 아래와 같습니다.

예제로 배우는 부트스트랩 컨테이너(3): .container와 .container-fluid 완벽 가이드

화면 크기가 변하더라도 컨테이너의 폭이 해당 구간의 max-width를 넘지 않고 중앙에 정렬되는 것을 확인할 수 있습니다.

.container-fluid 클래스

부트스트랩에서 .container-fluid 클래스는 뷰포트 전체 너비(100%)를 차지하는 반응형 컨테이너를 생성합니다. 뷰포트 크기와 관계없이 항상 100%의 max-width를 유지하기 때문에, 화면을 가득 채우는 풀와이드(full-width) 레이아웃을 만들 때 적합합니다.

아래 표는 뷰포트 크기별 .container-fluid 클래스의 max-width 값을 나타낸 것입니다.

	초소형(XS)	소형(SM)	중형(MD)	대형(LG)	초대형(XL)
max-width	100%	100%	100%	100%	100%

예제

다음 예제를 통해 직접 확인해 보겠습니다.

<html>
<head>
<title>.Container Class</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body style="border:5px solid Black;">
<br>
<div class="container-fluid bg-dark text-white">
<center>
<h1>tutorialspoint</h1>
<h6>SIMPLYEASYLEARNING</h6>
</center>
</div>
</body>
</html>

출력 결과

위 코드의 실행 결과는 아래와 같습니다.

예제로 배우는 부트스트랩 컨테이너(3): .container와 .container-fluid 완벽 가이드

두 클래스, 어떤 것을 선택해야 할까?

정리하면 다음과 같습니다. 일반적인 웹사이트처럼 콘텐츠 폭을 제한하고 화면 중앙에 정돈된 레이아웃을 원한다면 .container를 사용하는 것이 좋습니다. 반면 관리자 페이지, 대시보드, 이미지 갤러리처럼 화면 전체 너비를 활용해야 한다면 .container-fluid가 더 적합합니다. 두 클래스의 동작 차이를 정확히 이해하고 있으면 프로젝트 성격에 맞는 반응형 레이아웃을 손쉽게 구성할 수 있습니다.