부트스트랩의 그리드 시스템은 반응형 웹 디자인을 할 때 가장 빛을 발합니다.

다음은 부트스트랩에서 정해둔 구간들입니다.

  1. Extra Small (< 576px): 모바일
  2. Small (≥ 576px): 모바일
  3. Medium (≥ 768px): 타블릿
  4. Large (≥ 992px): 데스크탑
  5. Extra Large (≥ 1200px): 와이드 데스크탑

컨테이너(container)

기본적으로 컨테이너는 가운데 정렬이 되어 있고, 그리드의 행들을 감싸주는 역할을 합니다 (행들은 열들을 감싸주고 있고요!). 컨테이너의 종류는 두 가지인데요.

(div class=”container”): 구간별로 그리드에 고정된 width를 설정해줍니다.
(div class=”container-fluid”): 그리드는 항상 width: 100%;입니다.

(div class=”container”)

만약 구간별로 그리드에 고정된 가로값을 설정해주고 싶으면 “container” 클래스를 사용하세요. 구간별로 그리드가 고정되어 있으면 원하는 레이아웃을 만들기 쉽습니다.

“container”클래스를 사용하면 아래의 CSS 코드가 적용됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.container {
  width: 100%; /* extra small */
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/* small */
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

/* medium */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

/* large */
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

/* extra large */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

(div class=”container-fluid”)

상황에 따라 그리드가 항상 100%의 가로 길이를 갖는 것이 좋을 때가 있는데 “container-fluid” 클래스를 사용하면 됩니다. “container-fluid”클래스를 사용하면 아래의 CSS 코드가 적용됩니다.

1
2
3
4
5
6
7
.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

열(Column)

반응형 구간별로 (총 12칸 중) 열이 차지하는 칸의 개수도 다르게 할 수 있습니다.
예시를 몇 가지 봅시다.

예시 1 (구간별로 모두 설정되어 있는 경우)

1
<div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
  1. Extra Small (< 576px): 12칸을 모두 차지
  2. Small (≥ 576px): 6칸 차지
  3. Medium (≥ 768px): 4칸 차지
  4. Large (≥ 992px): 3칸 차지
  5. Extra Large (≥ 1200px): 2칸 차지

예시 2 (특정 구간만 설정되어 있는 경우)
아래와 같이 특정 구간에만 열 수가 설정되어 있는 경우도 있습니다. 그렇다면 그 구간부터 새로운 설정이 있는 상위 구간까지는 같은 칸 수를 차지합니다.

1
<div class="col-12 col-lg-3">
  1. Extra Small (< 576px): 12칸을 모두 차지
  2. Small (≥ 576px): 12칸을 모두 차지
  3. Medium (≥ 768px): 12칸을 모두 차지
  4. Large (≥ 992px): 3칸 차지
  5. Extra Large (≥ 1200px): 3칸 차지
1
<div class="col-6">
  1. Extra Small (< 576px): 6칸 차지
  2. Small (≥ 576px): 6칸 차지
  3. Medium (≥ 768px): 6칸 차지
  4. Large (≥ 992px): 6칸 차지
  5. Extra Large (≥ 1200px): 6칸 차지