[grid] BS4 - Grid Example (BS그리드 예제) ★

목차

1. Three Equal Columns (3개 동일 너비 컬럼)
2. Setting One Column Width (다른 너비 컬럼 설정)
3. More Equal Columns (그외 동일 너비 컬럼)
4. Row Cols (가로 컬럼 개수 제한)
5. More Unequal Columns (그외 다른 너비 컬럼)
6. Equal Height (동일 높이)
7. Nested Columns (안긴 컬럼)
8. Responsive Classes (반응형 클래스)
9. Stacked to Horizontal (sm 이상 시, 수직 → 수평)
10. Mix and Match  (기기 클래스 혼용)
11. 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>

 

결과보기