목차
Container - 2종류
Container - max-width (최대너비)
Container - padding (안쪽여백)
Container - border (테두리) / color (색깔)
Container - 분기점별 max-width (최대너비)
Container - 2종류
.container
박스형 (= 고정형너비 = 좌우공간 O)
.container-fluid
와이드형 (= 화면기기너비전체 = 좌우공간X)
Container - max-width (최대너비)
.container : (= 박스형) 최대너비
Extra small (<576px)
max-width:100%
Small (≥576px)
max-width:540px
Medium (≥768px)
max-width:720px
Large (≥992px)
max-width:750px
Extra large (≥1200px)
max-width:750px
.container-fluid : (= 와이드형) 최대너비
모든 기기
max-width:100%
Container - padding (안쪽여백)
.container, .container-fluid 모두 좌우 padding 15px 동일. (※ 상하 padding 없음 )
여백 관련 다양한 유틸클래스 이용해 조절 가능. (예: .pt-3 : padding-top:16px 의미)
<div class="container pt-3 "></div>
Container - border (테두리) / color (색깔)
색상클래스 , 유틸클래스 이용해 조절 가능.
<div class="container p-3 my-3 border "></div>
<div class="container p-3 my-3 bg-dark text-white "></div>
<div class="container p-3 my-3 bg-primary text-white "></div>
결과보기
Container - 분기점별 max-width (최대너비)
Class
Extra small <576px
Small≥576px
Medium≥768px
Large≥992px
Extra large ≥1200px
.container-sm
100%
540px
720px
960px
1140px
.container-md
100%
100%
720px
960px
1140px
.container-lg
100%
100%
100%
960px
1140px
.container-xl
100%
100%
100%
100%
1140px
[예제]
<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
결과보기
주소 복사
랜덤 이동