목차
Container - 2종류
Container - max-width (최대너비)
Container - padding (안쪽여백)
Container - border (테두리) / color (색깔)
Container - 분기점별 max-width (최대너비)
Container - 2종류
※ Container (컨테이너) : 내부 콘텐츠를 감싸는 상자/박스.
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
XXL (≥ 1400px ) - max-width:750px (※ BS5부터 지원)
예제보기
.container-fluid : (= 와이드형) 최대너비
예제보기
Container - padding (안쪽여백)
.container, .container-fluid 모두 좌우 padding만 갖음. (※ 상하 padding 없음 )
여백 관련 다양한 유틸클래스 이용해 조절 가능. (예: .pt-5 :padding-top: 3rem!important; 의미)
[예제]
<div class="container pt-5 "></div>
결과보기
Container - border (테두리) / color (색깔)
(색상클래스 /유틸클래스 ) 이용해 조절 가능.
[예제]
<div class="container p-5 my-5 border "></div>
<div class="container p-5 my-5 bg-dark text-white "></div>
<div class="container p-5 my-5 bg-primary text-white "></div>
결과보기
Container - 분기점별 max-width (최대너비)
Class
Extra small<576px
Small≥576px
Medium≥768px
Large≥992px
Extra large≥1200px
XXL≥1400px
.container-sm
100%
540px
720px
960px
1140px
1320px
.container-md
100%
100%
720px
960px
1140px
1320px
.container-lg
100%
100%
100%
960px
1140px
1320px
.container-xl
100%
100%
100%
100%
1140px
1320px
.container-xxl
100%
100%
100%
100%
100%
1320px
[예제]
<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>
<div class="container-xxl" >.container-xxl</div>
결과보기
주소 복사
랜덤 이동