Bootstrap 4 컨테이너

컨테이너는 내부 콘텐츠를 채우는 데 사용되며 사용 가능한 두 가지 컨테이너 클래스가 있다.

1. 클래스 .container는 반응형 고정 너비 컨테이너를 제공한다.
2. 클래스 는 뷰포트의 전체 너비에 걸쳐 있는 전체 너비 컨테이너를.container-fluid 제공한다.

고정컨테이너

.container 클래스를 사용하여 반응형 고정 너비 컨테이너를 만든다.

너비(max-width)는 화면 크기에 따라 변경된다.

예제

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

유동컨테이너

.container-fluid 클래스를 사용하여 항상 화면의 전체 너비에 걸쳐 있는 전체 너비 컨테이너를 만든다(width 항상 100%).

예제

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

컨테이너 패딩

기본적으로 컨테이너에는 15px 왼쪽 및 오른쪽 패딩이 있으며 상단 또는 하단 패딩은 없다.
따라서 우리는 더 보기 좋게 만들기 위해 추가 패딩 및 여백과 같은 간격 유틸리티를 자주 사용한다.
예를 들어, .pt-3″16px의 상단 패딩 추가”를 의미한다.

예제

<div class="container pt-3"></div>

컨테이너 테두리 및 색상

테두리 및 색상과 같은 기타 유틸리티도 컨테이너와 함께 사용되는 경우가 많다.

예제

<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-sm|md|lg|xl 클래스를 사용하여 반응형 컨테이너를 만들 수도 있다.

컨테이너의 는 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>

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기