Bootstrap 4 / Layout / .container, .row, .col

.container

Bootstrap에서 레이아웃은 .container, .row, .col로 만듭니다. 표(table)와 구성이 비슷합니다. .container는 table, .row는 tr, .col은 td에 대응한다고 보면 됩니다.

.container로 내용이 들어갈 공간의 가로폭을 정합니다. .container, .container-sm, .container-md, .container-lg, .container-xl, .container-fluid를 사용할 수 있고, 해상도에 대한 container의 크기는 다음과 같습니다.

  576px 미만 576px 이상 768px 이상 992px 이상 1200px 이상
.container 100% 540px 720px 960px 1140px
.container-sm 100% 540px 720px 960px 1140px
.container-md 100% 100% 720px 960px 1140px
.container-lg 100% 100% 100% 960px 1140px
.container-xl 100% 100% 100% 100% 1140px
.container-fluid 100% 100% 100% 100% 100%

예제 - .container, .container-sm

.contaner의 크기를 확인할 수 있는 간단한 예제입니다. .container-sm도 결과가 같습니다.

예제 - .container-md

.container를 .container-md로 변경한 결과는 다음과 같습니다.

예제 - .container-lg

.container를 .container-lg로 변경한 결과는 다음과 같습니다.

예제 - .container-xl

.container를 .container-xl로 변경한 결과는 다음과 같습니다.

예제 - .container-fluid

.container를 .container-fluid로 변경한 결과는 다음과 같습니다.

.row, .col

.row로 행을 만들고 .col로 열을 만듭니다. 다음은 4개의 열을 만드는 예제입니다. 어느 해상도에서도 4개의 열이 보입니다.

실제로는 해상도에 따라 다른 모양을 만드는 게 목적입니다. 다음은 768px 미만에서는 1열로, 768px 이상에서는 2열로 보이는 예제입니다.