Để thêm kích thước cho nút trong Bootstrap, hãy sử dụng các lớp sau:
| Lớp | Mô tả |
|---|---|
.btn-lg |
Tạo nút kích thước lớn |
.btn-sm |
Tạo nút kích thước nhỏ |
.btn-xs |
Tạo nút kích thước extra nhỏ (chỉ Bootstrap 3) |
.btn-block |
Tạo nút cấp độ block - chiếm toàn bộ chiều rộng của phần tử cha |
Ví dụ
Bạn có thể chạy mã sau để tạo nút nhỏ:
<!DOCTYPE html> <html> <head> <title>Ví dụ Bootstrap</title> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> </head> <body> <button type = "button" class = "btn btn-default btn-sm"> Nút nhỏ </button> </body> </html>
Lưu ý: Bootstrap 4 không hỗ trợ .btn-xs. Bootstrap 5 sử dụng .btn-lg và .btn-sm, trong khi .btn-block đã bị loại bỏ thay bằng các tiện ích hiển thị.