[basic] BS5 - Container (BS컨테이너) - 박스형 vs 와이드형 (= .container vs. .container-fluid)

1. Container - 2종류
2. Container - max-width (최대너비)
3. Container - padding (안쪽여백)
4. Container - border (테두리) / color (색깔)
5. Container - 분기점별 max-width (최대너비)

Container - 2종류 

※ Container (컨테이너) : 내부 콘텐츠를 감싸는 상자/박스.
 

• .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
• XXL (≥ 1400px) - max-width:750px   (※ BS5부터 지원)

 

예제보기

---

.container-fluid : (= 와이드형) 최대너비

 

• 모든 기기 - max-width:100%

 

예제보기

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 (최대너비)

[예제]

 

<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>

 

결과보기