부트스트랩에 버튼은 다양한 크기와 색을 지원합니다. 아래는 부트스트랩에서 기본적으로 제공하고 있는 버튼입니다.
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
버튼은 <button> 요소와 함께 사용하도록 설계되었지만 다른 요소에도 사용할 수 있습니다. 아래 다양한 예제를 참고하여 홈페이지를 작성하시면 좋을 것 같습니다. 모두 동일한 모양의 버튼을 만들어줍니다.
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
아웃라인만 들어간 버튼을 만들 수도 있습니다. 기본 클래스를 .btn-outline-*로 바꾸면 버튼의 배경 이미지와 색상이 제거된 아웃라인 버튼을 만들 수 있습니다.
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
부트스트랩은 버튼의 사이즈를 빠르게 변경하기 위한 클래스를 제공합니다. .btn-lg (큰 버튼)또는 .btn-sm(작은 버튼)을 추가하면 아래처럼 버튼의 크기가 조정됩니다.
<button type="button" class="btn btn-primary btn-lg">큰 버튼</button>
<button type="button" class="btn btn-secondary btn-lg">큰 버튼</button>
<button type="button" class="btn btn-primary btn-sm">작은 버튼</button>
<button type="button" class="btn btn-secondary btn-sm">작은 버튼</button>