1-2. 콘테이너
콘테이너는 내용을 감싸는 박스를 의미하며, 부트스트랩의 콘테이너에는 다음의 두 가지가 있습니다.
1) .container : 반응형 콘테이너
2) .container-fluid : 뷰포트의 전체 너비를 가진 콘테이너
■ 반응형 콘테이너
.container는 반응형 콘테이너 입니다. 화면 크기에 따라 고정 길이(max-width)를 가집니다.
|
Extra small(576px 이하) |
Small(576px 이상) |
Medium(768px 이상) |
Large(992px 이상) |
Extra large(1200px 이상) |
XX large(1400px 이상) |
| max-width | 100% | 540px | 720px | 960px | 1140px | 1320px |
다음은 반응형 콘테이너(.container)의 사용 예입니다.
.container : 반응형 콘테이너
ex1-3.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<title>반응형 콘테이너(ex1-3.html)</title>
</head>
<body>
<div class="container bg-light p-4">
<h1>글 제목</h1>
<p>단락입니다.단락입니다.단락입니다.단락입니다.단락입니다.단락입니다.</p>
<p>단락입니다.단락입니다.단락입니다.단락입니다.단락입니다.단락입니다.</p>
</div>
</body>
</html>
ex1-3.html의 실행 결과
■ 반응형 콘테이너 종류
반응형 콘테이너에는 다음 표에 나와 있는 것과 같이 다섯 종류가 있습니다.
| 클래스 |
Extra small(576px 이하) |
Small(576px 이상) |
Medium(768px 이상) |
Large(992px 이상) |
Extra large(1200px 이상) |
XX large(1400px 이상) |
| .container-sm | 100% | 540px | 720px | 960px | 1140px | 1320px |
| .container-md | 100% | 100% | 720px | 960px | 1140px | 1320px |
| .container-lg | 100% | 100% | 100% | 960px | 1140px | 1320px |
| .container-xl | 100% | 100% | 100% | 100% | 1140px | 1320px |
| .container-xxl | 100% | 100% | 100% | 100% | 100% | 1320px |
다음 예제에서 브라우저 창의 크기를 줄여보면서 각각의 콘테이너가 어떻게 변화하는 지를 살펴보세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<title>반응형 콘테이너 종류(ex1-4.html)</title>
</head>
<body>
<p class="my-3 text-center">브라우저 창 크기를 줄여보세요. 콘테이너의 크기가 특정 크기로 줄어듭니다.</p>
<div class="container-sm p-3 my-3 bg-light">.container-sm</div>
<div class="container-md p-3 my-3 bg-light">.container-md</div>
<div class="container-lg p-3 my-3 bg-light">.container-lg</div>
<div class="container-xl p-3 my-3 bg-light">.container-xl</div>
<div class="container-xxl p-3 my-3 bg-light">.container-xxl</div>
</body>
</html>
ex1-4.html의 실행 결과
■ 전체 너비 콘테이너
.container-fluid는 전체 너비 콘테이너 입니다. 뷰포트 전체 화면을 꽉 채웁니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<title>전체 너비 콘테이너(ex1-5.html)</title>
</head>
<body>
<div class="container-fluid mt-3">
<h3>전체 너비 콘테이너</h3>
<div class="row">
<div class="col p-3 bg-primary text-white">.col</div>
<div class="col p-3 bg-secondary text-white">.col</div>
<div class="col p-3 bg-primary text-white">.col</div>
</div>
</div>
</body>
</html>
ex1-5.html의 실행 결과
