BootstrapHow-ToBeginner · 3 min read

How to Use Button Sizes in Bootstrap: Simple Guide

In Bootstrap, you can change button sizes by adding size classes like btn-sm for small buttons and btn-lg for large buttons to the btn class. The default button size has no extra size class. This lets you quickly adjust button size for your design.

📐

Syntax

To set button sizes in Bootstrap, use the base btn class with one of these optional size classes:

btn-sm for small buttons
btn-lg for large buttons
No size class for default (medium) size

Example: <button class="btn btn-primary btn-sm">Small</button>

html

<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>

Output

Three buttons labeled Small Button, Default Button, and Large Button with increasing sizes from left to right.

💻

Example

This example shows three Bootstrap buttons with different sizes: small, default, and large. Each uses the btn-primary style with the size classes applied.

html

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

Output

A webpage showing three blue Bootstrap buttons side by side labeled Small Button (small size), Default Button (normal size), and Large Button (large size).

⚠️

Common Pitfalls

Common mistakes when using Bootstrap button sizes include:

Forgetting to include the base btn class, which makes size classes ineffective.
Using size classes on elements that are not buttons or links styled as buttons.
Mixing size classes incorrectly, like using both btn-sm and btn-lg on the same button.

Always ensure you use exactly one size class or none for default size.

html

<!-- Wrong: Missing base btn class -->
<button class="btn-sm btn-primary">Small but no base btn</button>

<!-- Right: Include base btn class -->
<button class="btn btn-primary btn-sm">Correct Small Button</button>

Output

The first button will not have Bootstrap button styling or size, the second button will appear as a small styled Bootstrap button.

📊

Quick Reference

Class	Description
btn	Base button class, required for all buttons
btn-sm	Makes the button smaller than default
btn-lg	Makes the button larger than default
No size class	Default medium button size

✅

Key Takeaways

Always use the base class btn with size classes for proper styling.

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

Omit size classes to keep the default button size.

Do not combine multiple size classes on the same button.

Include Bootstrap CSS for the size classes to work correctly.