버튼 샘플 Primary Secondary Success Danger Warning Info Light Dark Link
<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 >
버튼 태그 <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" >
아웃라인 버튼 Primary Secondary Success Danger Warning Info Light Dark
<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 >
사이즈 Large button Large button
<button type ="button" class ="btn btn-primary btn-lg" > Large button</button >
<button type ="button" class ="btn btn-secondary btn-lg" > Large button</button >
Small button Small button
<button type ="button" class ="btn btn-primary btn-sm" > Small button</button >
<button type ="button" class ="btn btn-secondary btn-sm" > Small button</button >
Block level button Block level button
<button type ="button" class ="btn btn-primary btn-sm" > Small button</button >
<button type ="button" class ="btn btn-secondary btn-sm" > Small button</button >
활성 상태 Active state <a href ="#" class ="btn btn-primary btn-lg active" role ="button" aria-pressed ="true" > Primary link</a >
<a href ="#" class ="btn btn-secondary btn-lg active" role ="button" aria-pressed ="true" > Link</a >
비활성 상태 Disabled state Primary button Button
<button type ="button" class ="btn btn-lg btn-primary" disabled > Primary button</button >
<button type ="button" class ="btn btn-secondary btn-lg" disabled > Button</button >
<a href ="#" class ="btn btn-primary btn-lg disabled" tabindex ="-1" role ="button" aria-disabled ="true" > Primary link</a >
<a href ="#" class ="btn btn-secondary btn-lg disabled" tabindex ="-1" role ="button" aria-disabled ="true" > Link</a >
버튼 플러그인 상태 토글 Toggle state Single toggle
<button type ="button" class ="btn btn-primary" data-toggle ="button" aria-pressed ="false" autocomplete ="off" >
Single toggle
</button >
체크박스와 라디오 버튼 <div class ="btn-group-toggle" data-toggle ="buttons" >
<label class ="btn btn-secondary active" >
<input type ="checkbox" checked autocomplete ="off" > Checked
</label >
</div >
<div class ="btn-group btn-group-toggle" data-toggle ="buttons" >
<label class ="btn btn-secondary active" >
<input type ="radio" name ="options" id ="option1" autocomplete ="off" checked > Active
</label >
<label class ="btn btn-secondary" >
<input type ="radio" name ="options" id ="option2" autocomplete ="off" > Radio
</label >
<label class ="btn btn-secondary" >
<input type ="radio" name ="options" id ="option3" autocomplete ="off" > Radio
</label >
</div >