Bootstrap Grid

Bootstrap Grid

부트스트랩의 그리드 시스템은 플렉스박스로 제작되었으며 문서에 크기에 따라 완벽하게 반응합니다. 최대 12개의 열을 허용하며, 컨테이너 및 열과 행으로 컨텐츠를 배치하고 정렬합니다.

Grid option

그리드 옵션에는 아래와 같이 5개의 클래스가 있습니다. 클래스를 결합하여 보다 동적이고 유연한 레이아웃을 만들 수 있습니다.

  .col- (576px 미만)
  .col-sm- (576px 이상)
  .col-md- (720px 이상)
  .col-lg- (930px 이상)
  .col-xl- (1200px 이상)

Tip : sm과 md에 대해 동일한 너비를 설정할 때 sm만 지정하면 자동으로 md까지 맞춰집니다.

Basic Structure

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

 <!-- 레이아웃에 따라 container or container-fluid를 사용할 수 있다. -->
  <div class="container">
    <div class="row">
      <div class="col-sm">
        One of three columns
      </div>
      <div class="col-sm">
        One of three columns
      </div>
      <div class="col-sm">
        One of three columns
      </div>
    </div>
  </div>

 

• 컨테이너는 컨텐츠를 가운데 및 좌우로 붙여넣는 방법을 제공합니다. container는 max-width:1140px의 크기로 컨텐츠를 가운데 정렬하여 붙여넣고 container-fluid는 width:100% 크기로 화면에 꽉 채워줍니다.
• 행(row)에는 거터(gutter)라고 하는 여백(padding)이 들어가 있습니다. (no-guttues 클래스를 사용하여 여백을 없앨 수 있습니다.)
• 컨텐츠의 내용은 열(columms)에 있어야 합니다.
• flexbox 덕분에 width 값이 지정되지 않은 열의 width가 비율에 맞춰 자동으로 지정됩니다.
• 그리드의 중단점(break-point)는 최소 폭의 미디어쿼리를 기반으로 합니다. 예를들어 col-sm-4는 md, lg, xl에는 적용이되지만 xs에는 적용되지 않습니다.