Bootstrap 3.3.7 | 그리드 시스템 | 컨테이너(container)

레이아웃을 만드는 가장 상위 요소에 .container 또는 .container-fluid를 추가한다. 전체 가로폭을 정하는 클래스 값이다.

클래스명 설명
.container 고정폭 레이아웃을 만들 때 사용한다.
.container-fluid 좌우로 꽉 찬 레이아웃을 만들 때 사용한다.

.container의 속성은 다음과 같다.

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

가로 해상도 767px 이하에서는 100%, 768px 이상에서는 750px, 992px 이상에서는 970px, 1200px 이상에서는 1170px의 가로폭을 가진다.

.container-fluid의 속성은 다음과 같다.

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

가로 해상도에 관계없이 100%의 가로폭을 가진다.

두가지 클래스를 비교할 수 이는 사용 예제는 아래와 같다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
      .container {
        background-color: #cccccc;
      }
      .container-fluid {
        background-color: #dddddd;
      }
      h1 {
        margin: 100px 0px;
      }
    </style>
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <h1>.container</h1>
    </div>
    <div class="container-fluid">
      <h1>.container-fluid</h1>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>