Container
- 사이트 내용을 감싸기 위해 포함하는 요소
- 컨테이너 내부의 콘텐츠를 채우는 데 사용
- 부트 스트랩의 특성상 반응형으로 브라우저의 크기를 줄이면 같이 모양 변경
- 레이아웃을 만드는 가장 상위 요소에서 쓰이며 전체 가로폭을 정하는 클래스
- 두 가지 컨테이너 클래스를 사용
.container / <div class="container">
- 반응형 고정폭 콘테이너
- 너비는 화면 크기(아래 표 기준)에 따라 변경
.container-fluid / <div class="container-fluid">
- 뷰포인트 전체폭까지 늘어나는 최대폭 콘테이너 (always 100%)
# 코드
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container bg-secondary text-center p-5 mt-4">
<h1>.container</h1>
</div>
<div class="container-fluid bg-secondary text-center p-5 mt-4">
<h1>.container-fluid</h1>
</div>
</body>
</html># 출력화면
[📚 Reference]
www.w3schools.com/bootstrap4/bootstrap_containers.asp
Bootstrap 4 Containers
My First Bootstrap Page This container has a dark background color and a white text, and some extra padding and margins. My First Bootstrap Page This container has a blue background color and a white text, and some extra padding and margins.
www.w3schools.com
'Front-end > Bootstrap' 카테고리의 다른 글
| [Bootstrap] Jumbotron(점보트론) (0) | 2021.03.10 |
|---|---|
| [Bootstrap] input 태그 (0) | 2021.03.09 |