Sử dụng bất cứ class nào sẵn có của nút để style cho nút.
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>
Bạn muốn nút to hay nút nhỏ? Hãy sử dụng các class .btn-lg, .btn-sm, hoặc .btn-xs cho các kích thước khác nhau.
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
Nếu bạn muốn tạo ra một nút có chiều rộng bằng chiều rộng của phần tử cha (full-width), hãy sử dụng class .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
Các nút sẽ hiển thị dưới hình thức giống như là đã được bấm (với màu nền tối, đường viền tối hoặc bóng đổ vào phía trong) khi được kích hoạt. Hãy sử dụng :active với thẻ <button> và .active với thẻ <a>. Tuy nhiên, bạn cũng có thể sử dụng .active trên thẻ <button> nếu bạn muốn tái tạo trạng thái kích hoạt.
Phần tử <button>
Không nhất thiết phải thêm :active như một class giả, nhưng nếu bạn muốn 2 nút hiển thị giống nhau, hãy sử dụng class .active.
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>
Phần tử <a>
Hãy sử dụng class .active trên các nút dạng <a>.
Primary link Link
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
Làm cho nút trông giống như không thể click vào được bằng cách làm mờ chúng đi 50%.
Phần tử <button>
Hãy sử dụng thuộc tính disabled trên các nút dạng <button>.
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
Tính tương thích của trình duyệt
Nếu bạn thêm thuộc tính disabled vào một <button>, trình duyệt Internet Explorer 9 (và các phiên bản thấp hơn) sẽ sinh ra text màu xám cùng với bóng của nó. Rất tiếc là chúng tôi vẫn chưa sửa được lỗi này.
Phần tử <a>
Hãy sử dụng class .disabled trên các nút dạng <a>.
Primary link Link
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
Chúng tôi sử dụng .disabled như một class tiện ích trong trường hợp này, tương tự như class .active class, vì vậy không nhất thiết phải có tiền tố đi kèm.
Chức năng liên kết không bị ảnh hưởng
Class này sẽ chỉ thay đổi về mặt hình thức của thẻ code><a> chứ không làm thay đổi chức năng của nó. Nếu bạn muốn vô hiệu hóa liên kết trên thẻ <a>, hãy sử dụng Javascript.
Sử dụng theo ngữ cảnh cụ thể
Mặc dù các class chỉ được sử dụng trên các phần tử <a> và <button> nhưng chỉ có các phần tử <button> là được hỗ trợ bên trong các thành phần điều hướng như nav và navbar.
Hãy sử dụng các class của nút trên một trong các loại thẻ <a>, <button>, hoặc <input>.
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
Tính tương thích với các trình duyệt
Chúng tôi đề xuất sử dụng phần tử <button> bất cứ khi nào có thể để đảm báo tính tương thích với các trình duyệt.
Ngoài ra, trình duyệt Firefox có một lỗi ngăn cản việc thiết lập line-height trên các nút dạng <input>. Điều này sẽ làm cho các nút có chiều cao không chính xác khi hiển thị trên Firefox..