Bootstrap 그리드 System
https://poiemaweb.com/bootstrap-grid-system


bootstrap 3

 

 

 

기기해상도

container 넓이

xs

 

 

sm

768

750

md

992

970

lg

1200

1170


Bootstrap 4

 

 

 

min

max

xs

 

575

sm

576

767

md

768

991

lg

992

1199

xl

1200

 


* 그리드는 container 안에 있어야 한다


* 칼럼(세로줄)은 모두 12칸
    - 예
<div class="container-fluid">
    <div class="row">
      <div class="col-xs-8">xs-8</div>
      <div class="col-xs-4">xs-4</div>
    </div>
</div>


* 클래스 2개 이상 지정
    - 예
<div class="container-fluid">
    <p>Viewport width가 992px 이상이면 2열, 미만이면 1열로 정렬된다</p>
    <div class="row">
      <!--
      viewport width가 992px(medium device) 이상이면
      .col-md-8 class가 적용되어 width는 8/12(66.66666667%)

      viewport width가 992px(medium device) 미만이면
      .col-xs-12 class가 적용되어 width는 12/12(100%)
      -->
      <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
      <!--
      viewport width가 992px(medium device) 이상이면
      .col-md-4 class가 적용되어 width는 4/12(33.33333333%)

      viewport width가 992px(medium device) 미만이면
      .col-xs-12 class가 적용되어 width는 12/12(100%)
      -->
      <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
    </div>


//========
* offset
    - 예) 4칸 오른쪽으로 이동
<div class="col-md-2 col-md-offset-4">


//========
* push , pull
    - 예)

    - 오른쪽으로 3칸 이동
<div class="col-xs-9 col-xs-push-3">.col-xs-9 .col-xs-push-3</div>

    - 왼쪽으로 9칸 이동
<div class="col-xs-3 col-xs-pull-9">.col-xs-3 .col-xs-pull-9</div>


반응형
Posted by codens