[basic] BS4 - 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

박스형 (= 고정형너비 = 좌우공간 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>

 

결과보기