Main menu

Bootstrap 3 강좌 | Grid system > .row, .col-*-*

.row

.container 또는 .container-fluid 안에 .row로 행을 만듭니다.

.col-*-*

.row 안에 .col-*-*로 열을 만듭니다. 첫번째 *에는 xs, sm, md, lg 중의 하나가, 두번째 *에는 1부터 12까지의 수 중의 하나가 들어갑니다.

  • xs : 항상 적용됩니다.
  • sm : 가로 해상도 768px 이상에서 적용됩니다.
  • md : 가로 해상도 992px 이상에서 적용됩니다.
  • lg : 가로 해상도 1200px 이상에서 적용됩니다.
  • 1 - 12 : 행을 12등분하여 그 중 몇 개를 사용할 지 정합니다.

.col-xs-*

예를 들어 .col-xs-6은 항상 행의 6/12을 가로 크기로 한다는 뜻이고, .col-xs-3은 항상 행의 3/12을 가로 크기로 한다는 뜻입니다.

행을 12등분했으므로, 숫자의 합이 12면 .container(.container-fluid)를 꽉 채웁니다. 숫자의 합이 12보다 작으면 오른쪽에 공간이 남으며, 12보다 크면 다음 줄로 넘어갑니다.

예제 1

<!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 | Grid System</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
      .container { background-color: #eeeeee; }
      .row { margin-top: 20px; margin-bottom: 20px; }
      div[ class|="col" ] { border: 1px solid #cccccc; }
      p { margin: 20px 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">
      <div class="row">
        <div class="col-xs-6">
          <p>.col-xs-6</p>
        </div>
        <div class="col-xs-4">
          <p>.col-xs-4</p>
        </div>
        <div class="col-xs-2">
          <p>.col-xs-2</p>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-5">
          <p>.col-xs-5</p>
        </div>
        <div class="col-xs-5">
          <p>.col-xs-5</p>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-5">
          <p>.col-xs-5</p>
        </div>
        <div class="col-xs-5">
          <p>.col-xs-5</p>
        </div>
        <div class="col-xs-4">
          <p>.col-xs-4</p>
        </div>
      </div>
    </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>

첫번째 행에서 숫자의 합은 6+4+2=12이므로, 행을 꽉 채웁니다.

두번째 행에서 숫자의 합은 5+5=10이므로 오른쪽에 남는 부분이 생깁니다.

세번째 행에서 숫자의 합은 5+5+4=14이므로, 12를 넘게 만드는 마지막 열이 다음 줄로 넘어갑니다.

.col-sm-*

.col-sm-*은 가로 해상도 768px 이상에서 적용됩니다.

예를 들어 .col-sm-6은 가로 해상도 768px 이상에서 행의 6/12을 가로 크기로 하겠다는 뜻입니다. 만약 가로 해상도가 768px 미만이라면 행 전체를 가로 크기로 합니다.

예제 2

<!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 | Grid System</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
      .container { background-color: #eeeeee; }
      .row { margin-top: 20px; margin-bottom: 20px; }
      div[ class|="col" ] { border: 1px solid #cccccc; }
      p { margin: 20px 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">
      <div class="row">
        <div class="col-xs-8">
          <p>.col-xs-8</p>
        </div>
        <div class="col-xs-4">
          <p>.col-xs-4</p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-8">
          <p>.col-sm-8</p>
        </div>
        <div class="col-sm-4">
          <p>.col-sm-4</p>
        </div>
      </div>
    </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>

첫번째 행은 .col-xs-*로 열을 만들었으므로, 가로 해상도에 상관없이 행을 8:4로 나눕니다.

하지만, 두번째 행은 .col-sm-*로 열을 만들었으므로, 가로 해상도 768px 이상에서는 행을 8:4로 나누지만, 768px 미만에서는 각각 한 줄을 다 차지합니다.

.col-md-*, .col-lg-*

.col-md-*은 가로 해상도 992px 이상에서 적용됩니다.

예를 들어 .col-md-6은 가로 해상도 992px 이상에서 행의 6/12을 가로 크기로 하겠다는 뜻입니다. 만약 가로 해상도가 992px 미만이라면 행 전체를 가로 크기로 합니다.

.col-lg-*은 가로 해상도 1200px 이상에서 적용됩니다.

예를 들어 .col-lg-6은 가로 해상도 1200px 이상에서 행의 6/12을 가로 크기로 하겠다는 뜻입니다. 만약 가로 해상도가 1200px 미만이라면 행 전체를 가로 크기로 합니다.

예제 3

<!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 | Grid System</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
      .container {
        background-color: #eeeeee;
      }
      .row {
        margin-top: 20px; margin-bottom: 20px;
      }
      div[ class|="col" ] {
        border: 1px solid #cccccc;
      }
      p {
        margin: 20px 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">
      <div class="row">
        <div class="col-xs-8">
          <p>.col-xs-8</p>
        </div>
        <div class="col-xs-4">
          <p>.col-xs-4</p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-8">
          <p>.col-sm-8</p>
        </div>
        <div class="col-sm-4">
          <p>.col-sm-4</p>
        </div>
      </div>
      <div class="row">
        <div class="col-md-8">
          <p>.col-md-8</p>
        </div>
        <div class="col-md-4">
          <p>.col-md-4</p>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-8">
          <p>.col-lg-8</p>
        </div>
        <div class="col-lg-4">
          <p>.col-lg-4</p>
        </div>
      </div>
    </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>

이 글을 공유하기

Kakao