Bootstrap 4 / Layout / .container, .row, .col
.container
Bootstrap에서 레이아웃은 .container, .row, .col로 만듭니다. 표(table)와 구성이 비슷합니다. .container는 table, .row는 tr, .col은 td에 대응한다고 보면 됩니다.
.container로 내용이 들어갈 공간의 가로폭을 정합니다. .container, .container-sm, .container-md, .container-lg, .container-xl, .container-fluid를 사용할 수 있고, 해상도에 대한 container의 크기는 다음과 같습니다.
576px 미만 | 576px 이상 | 768px 이상 | 992px 이상 | 1200px 이상 | |
.container | 100% | 540px | 720px | 960px | 1140px |
.container-sm | 100% | 540px | 720px | 960px | 1140px |
.container-md | 100% | 100% | 720px | 960px | 1140px |
.container-lg | 100% | 100% | 100% | 960px | 1140px |
.container-xl | 100% | 100% | 100% | 100% | 1140px |
.container-fluid | 100% | 100% | 100% | 100% | 100% |
예제 - .container, .container-sm
.contaner의 크기를 확인할 수 있는 간단한 예제입니다. .container-sm도 결과가 같습니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 4</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <style> div { border: 1px solid #dadada; background-color: #eeeeee; } </style> </head> <body> <div class="container"> <p>Container</p> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html>
예제 - .container-md
.container를 .container-md로 변경한 결과는 다음과 같습니다.
예제 - .container-lg
.container를 .container-lg로 변경한 결과는 다음과 같습니다.
예제 - .container-xl
.container를 .container-xl로 변경한 결과는 다음과 같습니다.
예제 - .container-fluid
.container를 .container-fluid로 변경한 결과는 다음과 같습니다.
.row, .col
.row로 행을 만들고 .col로 열을 만듭니다. 다음은 4개의 열을 만드는 예제입니다. 어느 해상도에서도 4개의 열이 보입니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 4</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <style> div[class^="col"] { padding: 20px; border: 1px solid #dadada; background-color: #eeeeee; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col">COL</div> <div class="col">COL</div> <div class="col">COL</div> <div class="col">COL</div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html>
실제로는 해상도에 따라 다른 모양을 만드는 게 목적입니다. 다음은 768px 미만에서는 1열로, 768px 이상에서는 2열로 보이는 예제입니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 4</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <style> div[class^="col"] { padding: 20px; border: 1px solid #dadada; background-color: #eeeeee; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-8">Content</div> <div class="col-md-4">Sidebar</div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html>