container
- 레이아웃을 만드는 최상위 요소로, 다른 요소들을 포함함
<div class=”container”>
.container : 반응형 고정 폭 컨테이너
.container-fluid : 뷰포트 전체 폭까지 늘어나는 최대폭 컨테이너 (가로 해상도에 상관없이 100%의 width를 가짐)
container 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 컨테이너</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container bg-primary text-white">
<h1>Bootstrap</h1>
<p>Container</p>
</div>
<div class="container-fluid bg-danger text-white">
<h1>Bootstrap</h1>
<p>Container</p>
</div>
</body>
</html>
'Frontend > Bootstrap' 카테고리의 다른 글
| 이미지 (0) | 2021.12.07 |
|---|---|
| Button (0) | 2021.12.07 |
| 그리드 (Grid) (0) | 2021.12.07 |
| Jumbotron (0) | 2021.12.07 |
| Bootstrap 개념 및 사용법 (0) | 2021.12.06 |
