Bootstrap 브레이크 포인트 정보

Bootstrap4에는 4개의 브레이크 포인트가 있습니다.

Bootstrap에는 576px, 768px, 992px, 1200px의 4 개의 중단 점이 있습니다


브레이크 포인트
-
576px
768px
992px
1200px


화면 폭 (px)
~575
576~767
768~991
992~1199
1200~

주요 대상 기기
-
스마트폰
태블릿
PC
대형 디스플레이

이름
Extra Small
작은
Medium
대형
Extra Large

클래스 접두사
col-숫자
col-sm-숫자
col-md-숫자
col-lg-숫자
col-xl-숫자

예) PC에서는 가로 표시, 스마트 폰에서는 세로 표시하고 싶을 때

이 경우, Medium 이상은 가로 표시로 전환하도록 합니다

<div class="row">
  <div class="col-md-2">block A</div>
  <div class="col-md-8">block B</div>
  <div class="col-md-2">block C</div>
</div>

col-md-숫자로 하는 것으로, 767 이하의 화면에서 보았을 경우는 세로로 쌓여 표시되고, 768px 이상의 화면에서 보았을 때에 2:8:2로 가로 표시됩니다.