Bootstrap 4

[grid] BS4 - Grid Extra Small (BS그리드 초소형기기) - .col-숫자, .col 클래스

목차
  1. 수동 너비
  2. 자동 너비

 

※ .col-숫자.col 클래스 경우, 모든 너비에 적용.

 

수동 너비

[3:9 비율]

 

<div class="container-fluid">

  <div class="row">

    <div class="col-3 bg-success">...</div>

    <div class="col-9 bg-warning">...</div>

  </div>

</div>

 

결과보기


[4:8 비율]

 

<div class="container-fluid">

  <div class="row">

    <div class="col-4 bg-success">...</div>

    <div class="col-8 bg-warning">...</div>

  </div>

</div>

 

결과보기


[6:6 비율]

 

<div class="container-fluid">

  <div class="row">

    <div class="col-6 bg-success">...</div>

    <div class="col-6 bg-warning">...</div>

  </div>

</div>

 

결과보기

 

자동 너비

각 컬럼 너비 (12/2 = 6 차지)

 

<div class="row">

  <div class="col">1 of 2</div>

  <div class="col">2 of 2</div>

</div>

 

결과보기


각 컬럼 너비 (12/4 = 3 차지)

 

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

 

결과보기


방문 감사합니다. (즐겨찾기 등록: 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버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드
제작의뢰 1
Q&A
커뮤니티 2
웹유틸
회원센터
홈짱 PC버전 로그인