부트스트랩 | 기본 사용법
정라잇 |
요약
가이드북 : 바로가기
- 그리드는 총 12개로 나뉘어 있습니다.
- 클래스명을 원하는 <div>태그에 넣어서 반응형마다 다르게 보일 수 있습니다.
모바일 사이즈
| 이름 | 반응형 전환 | 접두사 |
| Extra small (xs) | < 576px | .col-xs-12 |
| Small (sm) | ≥ 576px | .col-sm-12 |
| Medium (md) | 0px ~ 768px | .col-md-12 |
| Large (lg) | 0px ~ 992px | .col-lg-12 |
| Extra large (xl) | 0px ~ 1200px | .col-xl-12 |
| Extra extra large (xxl) | 0px ~ 1400px | .col-xxl-12 |
- 거터 너비 : 좌우 .75rem
자동 너비
<div class="col-sm-auto"></div>중간에 auto 가 들어간 클래스를 추가하면 너비에 따른 자동 사이즈 조절이 가능합니다.
행열
반응형을 만들 경우 자동으로 행열이 바뀌게 할 수 있습니다.
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>