Bootstrap Media Query, Grid system 미디어쿼리

Bootstrap은 기본적으로 4개의 breakpoint로 구간을 나눈다.

Mobile-first 방식을 기본 지원하므로 Media query에 포함되지 않은 모든 정의는 768px 미만 디바이스를 위한 것.

 

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {
  /* ... */
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {
  /* ... */
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) {
  /* ... */
}

 

Bootstrap은 반응형 12열 그리드 시스템을 제공

.row(행)을 먼저 배치하고 그 안에 .col-*-*(열)을 배치한다. 그리고 콘텐츠는 .col-*-* 내에 배치

 

 

(.col-*-*)의 구성

	Extra small devices Phones (~ 767px)	Small devices Tablets (768px ~)	Medium devices Desktops (992px ~)	Large devices Desktops (1200px ~)
Grid behavior	항상 수평 적용	viewport 너비가 breakpoint 이상이면 수평 적용, 미만이면 stack
Container width	None (auto)	750px	970px	1170px
Class prefix	.col-xs-	.col-sm-	.col-md-	.col-lg-
# of columns	12
Column width	Auto	~62px	~81px	~97px
Nestable	Yes
Offsets	Yes
Column ordering	Yes

* 가로 전체는 12 이며, 반응형 모든 디바이스에  Full로 설정 할 경우  col-12 로 적용해도 된다.

 

 

참고 : https://poiemaweb.com/bootstrap-grid-system