부트스트랩(Bootstrap)에서는 별도의 CSS 작성 없이 크기 관련 클래스만 추가하면 버튼의 크기를 손쉽게 조절할 수 있습니다. 상황에 맞는 클래스를 선택해 일관된 UI를 구성해 보세요.
버튼 크기 관련 주요 클래스
| 클래스 | 설명 |
|---|---|
| .btn-lg | 버튼을 큰(large) 크기로 만듭니다. 주요 액션 버튼에 적합합니다. |
| .btn-sm | 버튼을 작은(small) 크기로 만듭니다. 툴바나 보조 버튼에 유용합니다. |
| .btn-xs | 버튼을 아주 작은(extra small) 크기로 만듭니다. |
| .btn-block | 블록 레벨(block level) 버튼을 만들어 부모 요소의 전체 너비를 차지하게 합니다. |
참고: 부트스트랩 4(Bootstrap 4)부터는 .btn-xs 클래스가 공식적으로 제거되었습니다. 필요한 경우 아래와 같이 직접 정의해서 사용할 수 있습니다.
.btn-xs {
padding: .25rem .4rem;
font-size: .75rem;
line-height: 1.5;
border-radius: .2rem;
}사용 예제
다음 코드를 실행하면 .btn-sm 클래스가 적용된 작은 크기의 버튼을 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> </head> <body> <button type = "button" class = "btn btn-secondary btn-sm"> 작은 버튼 </button> </body> </html>
활용 팁
- 크기 클래스는 반드시 기본 클래스인
.btn과 함께 사용해야 정상적으로 적용됩니다. - 예:
class="btn btn-primary btn-lg"처럼 색상 클래스와 크기 클래스를 조합할 수 있습니다. .btn-block은 모바일 환경에서 화면 너비 전체를 채우는 버튼을 만들 때 특히 유용합니다.