반응형
Bootstrap 예제: 2. 그리드 시스템
Bootstrap의 그리드 시스템은 container, row, col 클래스를 사용하여 반응형 레이아웃을 구성합니다.
기본 구조
.container: 전체 콘텐츠를 감싸고 중앙에 정렬합니다..row: 컬럼(column)들을 담는 수평 그룹입니다..col-*: 실제 콘텐츠가 들어가는 컬럼입니다. 한.row안에 있는 컬럼들의 숫자 합은 12를 넘지 않도록 구성하는 것이 일반적입니다.
반응형 레이아웃 예제
화면 크기에 따라 컬럼의 배치가 달라지는 예제입니다.
- lg (Large, 992px 이상): 3개의 컬럼이 한 줄에 4칸씩 차지 (4+4+4 = 12)
- md (Medium, 768px 이상): 2개의 컬럼은 6칸씩, 1개는 12칸을 차지
- sm (Small, 576px 이상): 모든 컬럼이 12칸(한 줄 전체)을 차지
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Grid Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="p-3 border bg-light">Column 1</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="p-3 border bg-light">Column 2</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-4">
<div class="p-3 border bg-light">Column 3</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>반응형
'라이브러리 > 부트스트랩' 카테고리의 다른 글
| [Bootstrap] Bootstrap 예제: 4. Sass를 이용한 커스터마이징 (1) | 2025.09.26 |
|---|---|
| [Bootstrap] Bootstrap 예제: 3. 유틸리티 클래스 (0) | 2025.09.26 |
| [Bootstrap] Bootstrap 예제: 1. 기본 컴포넌트 (0) | 2025.09.26 |
| [Bootstrap] 부트스트랩 주요 기능 정리 (0) | 2025.09.26 |