부트스트랩4 그리드시스템은 CSS Flexbox로 제작되었으며 페이지 전체에 최대 12개의 열을 허용합니다.

12개의 열을 모두 개별적으로 사용하지 않으려면 열을 더 넓게 사용하기 위해 그룹화할 수 있습니다.

그리드시스템은 화면 크기에 따라 반응하여 자동으로 다시 배열됩니다.

부트스트랩4 그리드 클래스

부트스트랩4 그리드 시스템은 5개의 클래스를 포함합니다.

• .col- (극소형장치 : 화면 너비가 576px 미만)
  
• .col-sm- (소형장치 : 화면 너비가 576px이상)
  
• .col-md- (중형장치 : 화면 너비가 768px이상)
  
• .col-lg- (대형장치 : 화면 너비가 992px이상)
  
• .col-xl- (초대형장치 : 화면 너비가 1200px이상) 
  

이 클래스를 조합하여 보다 동적이고 유연한 레이아웃을 만들 수 있습니다.

** 각 클래스의 너비가 커집니다. sm과 md에 동일한 너비를 설정하려면 sm만 지정하면 됩니다.

부트스트랩4 그리드의 기본구조

아래 코드는 부트스트랩4의 기본 구조입니다.

<!-- 다른 장치에 나타나는 열너비를 직접 설정합니다 -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

<!-- 아래는 부트스트랩이 자동으로 레이아웃을 설정합니다. -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

첫번째 예 설명:

행을 만듭니다(<div class="row">). 그 다음 원하는 수의 열을 추가합니다(.col-*-* 클래스). 첫번째 *는 장치의 응답성을 표시: sm, md, lg, xl. 두번째 *은 숫자를 나타내며 각 행에 대해 최대 12개 추가해야 합니다.

두번째 예 설명:

각 열에 숫자를 추가하는 대신 부트스트랩이 레이아웃을 자동으로 처리하여 같은 너비열을 만듭니다. 두 개의 "col"요소를 쓸 경우, 각 열 너비는 50%입니다. 세 개의 열을 쓸 경우 33.33%너비. 네 개의 열을 쓸 경우 각각의 너비는 25%. 

.col-sm|md|lg|xl을 사용하여 열을 반응적으로 만들 수도 있습니다.

동일한 3개 열(Columns)인 경우

모든 장치와 화면 너비에 동일한 세 개의 너비 열을 만듭니다.

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

반응형 열(Columns)

테블릿에서 시작하여 초대형 PC로 확장하는 4개의 동일한 너비를 만드는 방법 예입니다.

576px미만의 액정에서는 열이 자동으로 쌓입니다.

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

두 개의 너비가 동일하지 않은 반응형 열(Columns)

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>