Bootstrap 4

[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>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
basic BS4 - HOME (BS소개)
basic BS4 - Start (BS시작) - BS4다운 / BS4CDN / BS4구문
basic BS4 - Container (BS컨테이너) - 박스형 vs 와이드형 (= .container vs. .co…
basic BS4 - Grid (BS그리드)
basic BS4 - Text/Typography (BS글자 = BS텍스트)
basic BS4 - Color (BS색깔 = BS색상) - BS글자색 + BS배경색
basic BS4 - Table (BS테이블) - 테이블테두리 + 테이블배경색 + 반응형테이블
basic BS4 - Image (BS이미지) - 이미지모양 + 이미지정렬 + 반응형이미지
basic BS4 - Jumbotron (BS점보트론) - 박스형 vs 와이드형
basic BS4 - Alert (BS경고 = BS얼럿 = BS경보) - 배경색 + 글자색 + 링크색 + 닫기 + 애니…
basic BS4 - Button (BS버튼) - 버튼색깔 + 버튼크기 + 버튼활성화 + 버튼비활성화
basic BS4 - Button Group (BS버튼그룹)
basic BS4 - Badge (BS배지)
basic BS4 - Progress Bar (BS진행바 = BS진도바 = BS프로그레스바)
basic BS4 - Spinner (BS스피너 = BS회전 = BS로더)
basic BS4 - Pagination (BS페이지매기기 = BS페이지번호 = BS페이징 = BS패지네이션) + BS…
basic BS4 - List Group (BS리스트그룹)
basic BS4 - Card (BS카드) - Well (BS웰) + Panel (BS패널) + Thumbnail (B…
basic BS4 - Dropdown (BS드롭다운/BS드롭업 = BS드랍다운/BS드랍업)
basic BS4 - Collapse (BS접기 = BS컬랩스 = BS토글)
1/3
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드 2
제작의뢰 1
Q&A
커뮤니티 2
웹유틸
회원센터
홈짱 PC버전 로그인