그리드 (grid)

컨테이너

컨테이너는 여러 자식 요소들의 기준이 되는 부모 요소입니다. 컨테이너의 크기는 반응형으로 결정되며 모바일 환경에서는 좌우 방향으로 1rem크기의 빈 공간을 남겨둡니다.

Container

일반적인 container 입니다. 최대 960px 의 넓이를 가지며 992px 미만의 윈도우 사이즈부터 반응형으로 변경됩니다.

<body>
<div class="container">
	...
</div>
</body>

Container-fluid

화면이 꽉차있는 container 입니다. 어느 환경에서든 항상 좌우 1rem의 빈 공간을 남겨둡니다.

<body>
<div class="container-fluid">
	...
</div>
</body>

Container-sm

작은 사이즈의 container 입니다. 최대 544px 의 넓이를 가지며 576px 미만의 윈도우 사이즈부터 반응형으로 변경됩니다.

<body>
<div class="container-sm">
	...
</div>
</body>

Container-md

중간 사이즈의 container 입니다. 최대 736px 의 넓이를 가지며 768px 미만의 윈도우 사이즈부터 반응형으로 변경됩니다.

<body>
<div class="container-md">
	...
</div>
</body>

Container-lg

큰 사이즈의 container 입니다. 최대 960px 의 넓이를 가지며 992px 미만의 윈도우 사이즈부터 반응형으로 변경됩니다.

<body>
<div class="container-lg">
	...
</div>
</body>

Container-xl

가장 큰 사이즈의 container 입니다. 최대 1168px 의 넓이를 가지며 1200px 미만의 윈도우 사이즈부터 반응형으로 변경됩니다.

<body>
<div class="container-xl">
	...
</div>
</body>

Auto Col

개수에 따라 자동으로 넓이가 변하는 Col 입니다.

col

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

Specifying Col

넓이를 지정해주는 Col 입니다. 기본적으로 row는 12등분 되어있으며 1 ~ 12 까지 지정 가능합니다.

col-3

col-9

col-6

<div class="row">
	<div class="col-3">
		col-3
	</div>
	<div class="col-9">
		col-9
	</div>
	<div class="col-6">
		col-6
	</div>
	<div class="col-6">
		col-6
	</div>
</div>

Responsive Col

반응형으로 작동되는 Col입니다.

지정해준 윈도우 사이즈에 따라 요소의 넓이가 변경됩니다.

col-md-3

col-md-9

col-sm-4

col-md-3

col-lg-5

<div class="row">
	<div class="col-md-3">
		col-md-3
	</div>
	<div class="col-md-9">
		col-md-9
	</div>
	<div class="col-sm-4">
		col-sm-4
	</div>
	<div class="col-md-3">
		col-md-3
	</div>
	<div class="col-lg-5">
		col-lg-5
	</div>
</div>

Multiple Col

반응형으로 작동되는 col 을 다중으로 이용할 수 있습니다.

col-lg-3 col-md-5 col-sm-6

col-lg-10 col-md-9 col-sm-5

<div class="row">
	<div class="col-lg-3 col-md-5 col-sm-6">
		col-lg-3 col-md-5 col-sm-6
	</div>
	<div class="col-lg-9 col-md-7 col-sm-6">
		col-lg-9 col-md-7 col-sm-6
	</div>
</div>