0
0
Bootsrapmarkup~5 mins

Button sizes in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Button sizes help make buttons look right for different parts of your page. They can be small, normal, or large to fit the space and importance.

When you want a small button for less important actions, like a tiny icon button.
When you need a large button to catch attention, like a main call-to-action.
When you want all buttons on a form to have the same size for neatness.
When designing for mobile, you might want bigger buttons for easier tapping.
When grouping buttons and you want them to look balanced in size.
Syntax
Bootsrap
<button class="btn btn-primary btn-sm">Small Button</button>
<button class="btn btn-primary">Default Button</button>
<button class="btn btn-primary btn-lg">Large Button</button>

Use btn-sm for small buttons and btn-lg for large buttons.

If you don't add a size class, the button will be the default size.

Examples
This creates a small secondary button.
Bootsrap
<button class="btn btn-secondary btn-sm">Small Button</button>
This creates a default-sized success button.
Bootsrap
<button class="btn btn-success">Default Button</button>
This creates a large danger button.
Bootsrap
<button class="btn btn-danger btn-lg">Large Button</button>
Sample Program

This page shows three buttons in different sizes using Bootstrap classes. The small button is compact, the default button is normal size, and the large button is bigger for emphasis. Each button has an accessible label.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Button Sizes</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <main class="p-4">
    <h1>Button Sizes Example</h1>
    <button type="button" class="btn btn-primary btn-sm" aria-label="Small button">Small Button</button>
    <button type="button" class="btn btn-primary" aria-label="Default button">Default Button</button>
    <button type="button" class="btn btn-primary btn-lg" aria-label="Large button">Large Button</button>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Always use semantic <button> elements for buttons to keep accessibility.

Use aria-label if the button text is not descriptive enough for screen readers.

Test button sizes on different screen sizes to make sure they are easy to tap on mobile devices.

Summary

Button sizes in Bootstrap use btn-sm for small and btn-lg for large buttons.

Default buttons have no size class and fit most uses.

Choosing the right button size helps users notice and use buttons easily.