부트스트랩4는 다양한 스타일의 버튼을 제공합니다.

<button type="button" class="btn">Basic</button>
<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-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>

버튼 클래스는 <a>, <button>, <input>요소에서 사용할 수 있습니다.

<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

버튼 윤곽선(Outline)

부트스트랩4에는 8개의 윤곽선/경계선 버튼이 있습니다.

<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-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>

버튼 크기

<button type="button" class="btn btn-success btn-lg">큰 버튼</button>
<button type="button" class="btn btn-success btn-md">기본 버튼</button>    
<button type="button" class="btn btn-success btn-sm">작은 버튼</button>

블록레밸 버튼

부모 요소의 전체 너비에 걸쳐 있는 블록 레벨 버튼을 만들려면 .btn-block클래스를 추가합니다.

<button type="button" class="btn btn-success btn-block">버튼1</button>
<button type="button" class="btn btn-default btn-block">버튼2</button>

활성/비활성 버튼(active/disabled)

버튼은 활성(마우스 눌린 것처럼 보임) 또는 비활성(클릭이 안된 상태)상태로 설정할 수 있습니다.

<button type="button" class="btn btn-success">기본 상태</button>
<button type="button" class="btn btn-success active">Active 상태</button>
<button type="button" class="btn btn-success" disabled>Disabled 상태</button>
<a href="#" class="btn btn-success disabled">Disabled 링크</a>