부트스트랩 그리드 시스템 내에서 구축하는 데 익숙해지는 기본 그리드 레이아웃.
이 예에서 .themed-grid-col클래스는 일부 테마를 추가하기 위해 열에 추가됩니다. 이것은 기본적으로 Bootstrap에서 사용할 수 있는 클래스가 아닙니다.
Bootstrap 그리드 시스템에는 지원하는 각 장치 범위에 대해 하나씩 5개의 계층이 있습니다. 각 계층은 최소 표시 영역 크기에서 시작하고 재정의되지 않는 한 더 큰 장치에 자동으로 적용됩니다.
데스크톱에서 시작하여 큰 데스크톱으로 확장되는 3개의 동일한 너비 열 을 가져옵니다 . 모바일 장치, 태블릿 및 그 이하에서는 열이 자동으로 누적됩니다.
데스크탑에서 시작하여 다양한 너비의 대형 데스크탑으로 확장되는 3개의 열을 얻으십시오 . 그리드 열은 단일 수평 블록에 대해 최대 12개까지 추가해야 합니다. 그 이상이면 뷰포트에 관계없이 열이 쌓이기 시작합니다.
데스크탑에서 시작하여 대형 데스크탑으로 확장되는 두 개의 열을 얻으십시오 .
전체 너비 요소에는 그리드 클래스가 필요하지 않습니다.
문서에 따르면 중첩은 쉽습니다. 기존 열 안에 열 행을 넣으면 됩니다. 이렇게 하면 데스크톱에서 시작하여 큰 데스크톱으로 확장되는 두 개의 열이 제공 되며, 더 큰 열 내에 다른 두 개(동일한 너비)가 있습니다.
모바일 장치 크기, 태블릿 및 그 이하에서는 이러한 열과 중첩 열이 누적됩니다.
Bootstrap v4 그리드 시스템에는 xs(초소형, 이 클래스 중위는 사용되지 않음), sm(소형), md(중형), lg(대형) 및 xl(초대형)의 5가지 계층의 클래스가 있습니다. 이러한 클래스의 거의 모든 조합을 사용하여 보다 동적이고 유연한 레이아웃을 만들 수 있습니다.
클래스의 각 계층은 확장됩니다. 즉, md, lg 및 xl에 대해 동일한 너비를 설정하려는 경우 md만 지정하면 됩니다.
Bootstrap v4.4에 추가된 추가 클래스는 특정 중단점까지 너비가 100%인 컨테이너를 허용합니다.