목차
- Three Equal Columns (3개 동일 너비 컬럼)
- Setting One Column Width (다른 너비 컬럼 설정)
- More Equal Columns (그외 동일 너비 컬럼)
- Row Cols (가로 컬럼 개수 제한)
- More Unequal Columns (그외 다른 너비 컬럼)
- Equal Height (동일 높이)
- Nested Columns (안긴 컬럼)
- Responsive Classes (반응형 클래스)
- Stacked to Horizontal (sm 이상 시, 수직 → 수평)
- Mix and Match (기기 클래스 혼용)
- No Gutters (컬럼 사이 여백 제거)
※ Grid (그리드) : 가로 전체 너비를 12등분 후, 각 컬럼의 너비 설정.
Three Equal Columns (3개 동일 너비 컬럼)
[숫자 사용 X]
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
결과보기
[숫자 사용 O]
<div class="row">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
</div>
결과보기
Setting One Column Width (다른 너비 컬럼 설정)
[셋 다 숫자 사용]
<div class="row">
<div class="col-3">col-3</div>
<div class="col-6">col-6</div>
<div class="col-3">col-3</div>
</div>
결과보기
[가운데만 숫자 사용]
<div class="row">
<div class="col">col</div>
<div class="col-6">col-6</div>
<div class="col">col</div>
</div>
결과보기
More Equal Columns (그외 동일 너비 컬럼)
[2개 동일 너비]
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
결과보기
[4개 동일 너비]
<div class="row">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3 of 4</div>
<div class="col">4 of 4</div>
</div>
결과보기
[6개 동일 너비]
<div class="row">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3 of 6</div>
<div class="col">4 of 6</div>
<div class="col">5 of 6</div>
<div class="col">6 of 6</div>
</div>
Row Cols (가로 컬럼 개수 제한)
[1줄에 1개 컬럼 허용]
<div class="row row-cols-1">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
결과보기
[1줄에 2개 컬럼 허용]
<div class="row row-cols-2">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3 of 4</div>
<div class="col">4 of 4</div>
</div>
결과보기
[1줄에 3개 컬럼 허용]
<div class="row row-cols-3">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3 of 6</div>
<div class="col">4 of 6</div>
<div class="col">5 of 6</div>
<div class="col">6 of 6</div>
</div>
결과보기
More Unequal Columns (그외 다른 너비 컬럼)
[2개 다른 너비 컬럼]
<div class="row">
<div class="col-8">1 of 2</div>
<div class="col-4">2 of 2</div>
</div>
결과보기
[4개 다른 너비 컬럼]
<div class="row">
<div class="col-2">1 of 4</div>
<div class="col-2">2 of 4</div>
<div class="col-2">3 of 4</div>
<div class="col-6">4 of 4</div>
</div>
결과보기
[4개 중 2개 컬럼만 너비 설정]
<div class="row">
<div class="col-4">1 of 4</div>
<div class="col-6">2 of 4</div>
<div class="col">3 of 4</div>
<div class="col">4 of 4</div>
</div>
결과보기
Equal Height (동일 높이)
※ 어느 한 컬럼의 높이가 늘어나면, 나머지 컬럼의 높이도 자동 변경됨.
<div class="row">
<div class="col">Lorem ipsum...</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
결과보기
Nested Columns (안긴 컬럼)
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
결과보기
Responsive Classes (반응형 클래스)
.col- (extra small devices : 화면너비 < 576px)
.col-sm- (small devices : 화면너비 >= 576px)
.col-md- (medium devices : 화면너비 >= 768px)
.col-lg- (large devices : 화면너비 >= 992px)
.col-xl- (xlarge devices : 화면너비 >= 1200px)
PS.
1. 기본 5개 클래스 제공.
2. 위 클래스를 결합해 역동적이고 유연한 레이아웃 구성 가능.
3. 각 클래스는 상위 기기에 확장 적용되므로 sm・md 경우 sm만 설정하면 됨.
Stacked to Horizontal (sm 이상 시, 수직 → 수평)
<div class="row">
<div class="col-sm-9">col-sm-9</div>
<div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
결과보기
Mix and Match (기기 클래스 혼용)
(sm 미만 시 6:6) → (sm 이상 시 9:3)
<div class="row">
<div class="col-6 col-sm-9">col-6 col-sm-9</div>
<div class="col-6 col-sm-3">col-6 col-sm-3</div>
</div>
결과보기
(lg 미만 시 7:5) → (lg 이상 시 8:4)
<div class="row">
<div class="col-7 col-lg-8">col-7 col-lg-8</div>
<div class="col-5 col-lg-4">col-5 col-lg-4</div>
</div>
결과보기
(sm 미만 시 수직) → (sm 이상 시 3:9) → (md 이상 시 6:6) → (lg 이상 시 4:8)
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div>
<div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
</div>
결과보기
No Gutters (컬럼 사이 여백 제거)
<div class="row no-gutters">
<div class="col-3 bg-success">col-3</div>
<div class="col-9 bg-warning">col-9</div>
</div>
결과보기