دکمهها
پیشفرض
<button type="button" class="btn btn-primary">پیشفرض</button>
<button type="button" class="btn btn-secondary">فرعی</button>
<button type="button" class="btn btn-success">موفقیت</button>
<button type="button" class="btn btn-danger">خطر</button>
<button type="button" class="btn btn-warning">هشدار</button>
<button type="button" class="btn btn-info">اطلاعات</button>
<button type="button" class="btn btn-light">روشن</button>
<button type="button" class="btn btn-dark">تیره</button>
مربعی
<button type="button" class="btn btn-primary btn-square">پیشفرض</button>
دورخط دار
<button type="button" class="btn btn-outline-primary">پیشفرض</button>
گرد
<button type="button" class="btn btn-primary btn-rounded">پیشفرض</button>
حروف بزرگ (انگلیسی)
<button type="button" class="btn btn-primary btn-uppercase">پیشفرض</button>
غیرفعال
<button type="button" class="btn btn-primary disabled">پیشفرض</button>
<!-- or -->
<button type="button" class="btn btn-primary" disabled>پیشفرض</button>
دکمه همراه آیکن
<button type="button" class="btn btn-outline-secondary btn-uppercase">
<i class="ti-plus mr-2"></i> Create User
</button>
<button type="button" class="btn btn-success btn-uppercase">
<i class="ti-check-box mr-2"></i> Save
</button>
<button type="button" class="btn btn-outline-warning btn-rounded btn-uppercase">
<i class="ti-settings mr-2"></i> Settings
</button>
<button type="button" class="btn btn-danger btn-square btn-uppercase">
<i class="ti-trash mr-2"></i> Delete
</button>
فقط آیکن
<button type="button" class="btn btn-outline-secondary">
<i class="ti-plus"></i>
</button>
<button type="button" class="btn btn-success">
<i class="ti-check-box"></i>
</button>
<button type="button" class="btn btn-warning btn-rounded">
<i class="ti-settings"></i>
</button>
<button type="button" class="btn btn-danger btn-square">
<i class="ti-trash"></i>
</button>
تنها آیکون گرد
<button type="button" class="btn btn-secondary btn-floating">
<i class="ti-plus"></i>
</button>
دکمه های بارگذاری
<button type="button" class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>
در حال بارگذاری
</button>
پالس دار
<button type="button" class="btn btn-primary btn-pulse">
<i class="ti-user mr-2"></i> Profile
</button>
دکمههای فروشگاهها
<a href="#" class="btn btn-apple">
<i class="fa fa-apple"></i>
<span>
<span>Download on the</span>
<span>App Store</span>
</span>
</a>
<a href="#" class="btn btn-google-play">
<img src="google_play_button.png" alt="image">
<span>
<span>Get in on</span>
<span>Google Play</span>
</span>
</a>
شبکههای اجتماعی
<button type="button" class="btn btn-facebook">
<i class="fa fa-facebook-square mr-2"></i> Facebook
</button>
<button type="button" class="btn btn-google">
<i class="fa fa-google mr-2"></i> Google
</button>
<button type="button" class="btn btn-twitter">
<i class="fa fa-twitter mr-2"></i> Twitter
</button>
<button type="button" class="btn btn-linkedin">
<i class="fa fa-linkedin mr-2"></i> Linkedin
</button>
...
اندازهها
<button type="button" class="btn btn-secondary btn-sm">Button</button>
<button type="button" class="btn btn-secondary">Button</button>
<button type="button" class="btn btn-secondary btn-lg">Button</button>
دکمه گروهی
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-dark">Left</button>
<button type="button" class="btn btn-dark">Middle</button>
<button type="button" class="btn btn-dark">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">
<i class="ti-control-pause"></i>
</button>
<button type="button" class="btn btn-success">
<i class="ti-control-play"></i>
</button>
<button type="button" class="btn btn-warning">
<i class="ti-control-forward"></i>
</button>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-dark">1</button>
<button type="button" class="btn btn-dark">2</button>
<button type="button" class="btn btn-dark">3</button>
<button type="button" class="btn btn-dark">4</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-dark">5</button>
<button type="button" class="btn btn-dark">6</button>
<button type="button" class="btn btn-dark">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-dark">8</button>
</div>
</div>
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
<button type="button" class="btn btn-dark">Left</button>
<button type="button" class="btn btn-dark">Middle</button>
<button type="button" class="btn btn-dark">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Default button group">
<button type="button" class="btn btn-dark">Left</button>
<button type="button" class="btn btn-dark">Middle</button>
<button type="button" class="btn btn-dark">Right</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
<button type="button" class="btn btn-dark">Left</button>
<button type="button" class="btn btn-dark">Middle</button>
<button type="button" class="btn btn-dark">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-dark">1</button>
<button type="button" class="btn btn-dark">2</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-dark dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-primary">
<i class="fa fa-cloud-upload"></i>
</button>
<button type="button" class="btn btn-primary">
<i class="fa fa-calendar"></i>
</button>
<button type="button" class="btn btn-primary">
<i class="fa fa-database"></i>
</button>
<button type="button" class="btn btn-primary">
<i class="fa fa-cog"></i>
</button>
<button type="button" class="btn btn-primary">
<i class="fa fa-heart-o"></i>
</button>
<button type="button" class="btn btn-primary">
<i class="fa fa-share"></i>
</button>
</div>