Bootstrap에서는 .input-lg, .input-sm 같은 크기 조절 클래스와 .col-lg-* 같은 그리드 클래스를 활용해 폼 요소의 높이와 너비를 손쉽게 설정할 수 있습니다.
주요 클래스 정리
- .input-lg — 입력 필드의 높이를 기본값보다 크게 지정합니다.
- .input-sm — 입력 필드의 높이를 기본값보다 작게 지정합니다.
- .col-lg-* — 12열 그리드 시스템을 기반으로 입력 필드의 너비를 조절합니다. 예를 들어
.col-lg-4는 전체 너비의 3분의 1을 차지합니다.
예제
아래 코드를 실행하면 입력 필드와 select 박스의 높이를 다르게 적용하고, 그리드 클래스로 너비를 조절한 결과를 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.min.js"></script> <script src = "/bootstrap/js/bootstrap.min.js"></script> </head> <body> <form role = "form"> <div class = "form-group"> <input class = "form-control input-lg" type = "text" placeholder =".input-lg"> </div> <div class = "form-group"> <input class = "form-control" type = "text" placeholder = "Default input"> </div> <div class = "form-group"> <input class = "form-control input-sm" type = "text" placeholder = ".input-sm"> </div> <div class = "form-group"></div> <div class = "form-group"> <select class = "form-control input-lg"> <option value = "">.input-lg</option> </select> </div> <div class = "form-group"> <select class = "form-control"> <option value = "">Default select</option> </select> </div> <div class = "form-group"> <select class = "form-control input-sm"> <option value = "">.input-sm</option> </select> </div> <div class = "row"> <div class = "col-lg-2"> <input type = "text" class = "form-control" placeholder = ".col-lg-2"> </div> <div class = "col-lg-3"> <input type = "text" class = "form-control" placeholder = ".col-lg-3"> </div> <div class = "col-lg-4"> <input type = "text" class = "form-control" placeholder = ".col-lg-4"> </div> </div> </form> </body> </html>
실행 결과 설명
위 예제를 실행하면 다음과 같은 결과를 볼 수 있습니다.
- 첫 번째 텍스트 입력 필드는
.input-lg가 적용되어 가장 높고, 세 번째 필드는.input-sm이 적용되어 가장 낮습니다. - select 박스 역시 동일한 방식으로 크기 차이가 적용됩니다.
- 마지막 행에서는
.col-lg-2,.col-lg-3,.col-lg-4순서대로 입력 필드의 너비가 점점 넓어지는 것을 확인할 수 있습니다.
이처럼 Bootstrap의 유틸리티 클래스만 조합하면 별도의 CSS 작성 없이도 폼 요소의 크기를 일관성 있게 제어할 수 있습니다.