목차
- BS5 Grid Option (옵션)
- .container 클래스 - box형 (= 고정너비)
- .container-fluid 클래스 - wide형 (= 전체너비)
- Auto Layout Columns (자동 컬럼 너비)
BS5 Grid Option (옵션)
|
초소형 < 576px |
소형기기 >= 576px |
중형기기 >= 768px |
대형기기 >= 992px |
초대형기기 >= 1200px |
초초대형기기 >= 1400px |
Class 접두어 |
.col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
※ .container (또는, .container-fluid) > .row > .col~ 구조가 되도록 요소 배치.
※ .row (행) 안의 .column (열) 개수 합이 12가 되도록 배치.
※ 분기점 미만 : 수직정렬
※ 분기점 이상 : 수평정렬.
.container 클래스 - box형 (= 고정너비)
(sm 미만 수직 정렬) → (sm 이상 box형 6:6 정렬)
<div class="container">
<div class="row">
<div class="col-sm-6">col-sm-6</div>
<div class="col-sm-6">col-sm-6</div>
</div>
</div>
결과 보기
.container-fluid 클래스 - wide형 (= 전체너비)
(sm 미만 수직 정렬) → (sm 이상 width형 6:6 정렬)
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">col-sm-6</div>
<div class="col-sm-6">col-sm-6</div>
</div>
</div>
결과 보기
Auto Layout Columns (자동 컬럼 너비)
(sm 미만 수직 정렬) → (sm 이상 각 컬럼 너비 자동 12/2 설정)
<div class="row">
<div class="col-sm">1 of 2</div>
<div class="col-sm">2 of 2</div>
</div>
결과보기
(sm 미만 수직 정렬) → (sm 이상 각 컬럼 너비 자동 12/4 설정)
<div class="row">
<div class="col-sm">1 of 4</div>
<div class="col-sm">2 of 4</div>
<div class="col-sm">3 of 4</div>
<div class="col-sm">4 of 4</div>
</div>
결과보기
PS. 클래스에 붙는 숫자를 제거하면 자동으로 컬럼 개수에 따라 너비 설정됨.