Bootstrap의 그리드 시스템은 페이지에 최대 12 개의 컬럼(columns)을 허용합니다.

12 개의 컬럼을 모두 개별적으로 사용하지 않으려면, 컬럼을 함께 그룹화해서 더 넓은 컬럼을 만들 수 있습니다.



Bootstrap의 그리드 시스템은 반응형이며, 컬럼은 화면 크기에 따라 자동으로 재정렬됩니다.

Bootstrap의 그리드 시스템에는 4개의 클래스가 있습니다:

• xs (휴대전화 - 너비가 768px 미만인 화면)
• sm (태블릿 - 너비가 768px 이상인 화면)
• md (소형 노트북 - 너비가 992px 이상인 화면)
• lg (노트북 및 데스크톱 - 너비가 1200px 이상인 화면)

상기 클래스들을 결합하여 더 동적이고 유연한 레이아웃을 만들 수 있습니다.

다음은 Bootstrap 그리드의 기본 구조입니다.

1. 가로 행(''<div class="row">'')을 만듭니다.
2. 원하는 개수의 컬럼을 추가합니다.(''.col-*-*'' 클래스가 있는 태그)
   • ''.col-*-*''의 숫자는 항상 각 가로 행에 대해 최대 12개까지 추가해야 합니다.

아래에서는 기본 Bootstrap 그리드 레이아웃의 몇 가지 예제들을 수집했습니다.

하기 예제는 태블릿에서 시작하여 큰 데스크톱으로 확장하는 3 개의 동일 너비의 컬럼을 가져 오는 방법을 보여줍니다.
너비가 768px 미만인 휴대 전화 또는 화면에서는 컬럼이 자동으로 쌓입니다:

하기 예제에서는 태블릿에서 시작하여 대형 데스크톱으로 확장하는 두 개의 다양한 너비의 컬럼을 가져 오는 방법을 확인합니다.