Bootstrap 5 Buttons Sizes
Bootstrap 5 provides 2 different classes that allow changing the button sizes. The .btn-lg and .btn-sm classes are used for large and small buttons.
Buttons Sizes Classes:
- .btn-lg: This class is used to create large-size buttons.
- .btn-sm: This class is used to create small-size buttons.
Syntax:
// For Large Button <button type="button" class="btn btn-lg"> Large button </button> // For Small Button <button type="button" class="btn btn-sm"> Small button </button>
Example 1: In this example, we will use button size classes to create buttons in different sizes.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap 5 Buttons Sizes</ title > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body style = "text-align:center;" > < div class = "container mt-3" > < h1 class = "text-success" > w3wiki </ h1 > < h2 >Bootstrap 5 Buttons Sizes</ h2 > < h3 >Large Buttons</ h3 > < button type = "button" class = "btn btn-lg btn-primary" > Primary Button </ button > < button type = "button" class = "btn btn-lg btn-secondary" > Secondary Button </ button > < button type = "button" class = "btn btn-lg btn-success" > Success Button </ button > < br >< br > < h3 >Small Buttons</ h3 > < button type = "button" class = "btn btn-sm btn-danger" > Danger Button </ button > < button type = "button" class = "btn btn-sm btn-warning" > Warning Button </ button > < button type = "button" class = "btn btn-sm btn-info" > Info Button </ button > < button type = "button" class = "btn btn-sm btn-light" > Light Button </ button > < button type = "button" class = "btn btn-sm btn-dark" > Dark Button </ button > </ div > </ body > </ html > |
Output:
Example 2: In this example, we will use button size classes to create buttons in different sizes.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap 5 Buttons Sizes</ title > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body style = "text-align:center;" > < div class = "container mt-3" > < h1 class = "text-success" > w3wiki </ h1 > < h2 >Bootstrap 5 Buttons Sizes</ h2 > < h3 >Large Buttons</ h3 > < button type = "button" class = "btn btn-lg btn-outline-primary" > Primary Outline Button </ button > < button type = "button" class = "btn btn-lg btn-outline-secondary" > Secondary Outline Button </ button > < button type = "button" class = "btn btn-lg btn-outline-success" > Success Outline Button </ button > < br >< br > < h3 >Small Buttons</ h3 > < button type = "button" class = "btn btn-sm btn-outline-danger" > Danger Outline Button </ button > < button type = "button" class = "btn btn-sm btn-outline-warning" > Warning Outline Button </ button > < button type = "button" class = "btn btn-sm btn-outline-info" > Info Outline Button </ button > < button type = "button" class = "btn btn-sm btn-outline-light" > Light Outline Button </ button > < button type = "button" class = "btn btn-sm btn-outline-dark" > Dark Outline Button </ button > </ div > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/buttons/#sizes
Contact Us