Button sizes in Bootsrap - Mini Project: Build & Apply

Bootstrap Button Sizes

📖 Scenario: You are creating a simple webpage with three buttons. Each button should have a different size using Bootstrap classes to show how button sizes change the look and feel.

🎯 Goal: Build a webpage with three Bootstrap buttons labeled Small, Medium, and Large. Each button uses the correct Bootstrap size class to appear small, medium (default), and large.

📋 What You'll Learn

Use Bootstrap 5 CSS from CDN in the <head>

Create three buttons inside a <main> section

Label buttons exactly as Small, Medium, and Large

Apply Bootstrap button classes: btn and btn-primary to all buttons

Add size classes btn-sm for Small, no size class for Medium, and btn-lg for Large

💡 Why This Matters

🌍 Real World

Buttons are everywhere on websites and apps. Knowing how to control their size and accessibility helps create better user experiences.

💼 Career

Web developers often use Bootstrap to quickly style buttons and controls. Understanding button sizes and accessibility is important for building professional, user-friendly interfaces.

1

Setup basic HTML with Bootstrap CSS

Create a basic HTML5 page with lang="en" in the <html> tag. Add <head> with <meta charset="UTF-8">, <meta name="viewport" content="width=device-width, initial-scale=1">, and link to Bootstrap 5 CSS from https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css. Add an empty <body> with a <main> section inside.

Bootsrap

Hint

Remember to add the Bootstrap CSS link inside the <head> section and set the language attribute on the <html> tag.

2

Add three buttons with Bootstrap base classes

Inside the existing <main> section, add three <button> elements. Each button should have the classes btn and btn-primary. Label the buttons exactly as Small, Medium, and Large respectively.

Bootsrap

  
  
  
  Bootstrap Button Sizes


  
    
    
  

Hint

Use the class attribute to add both btn and btn-primary classes to each button.

3

Add size classes to Small and Large buttons

Add the Bootstrap size class btn-sm to the Small button's class list. Add the size class btn-lg to the Large button's class list. Leave the Medium button with no size class so it uses the default size.

Bootsrap

  
  
  
  Bootstrap Button Sizes


  
    
  

Hint

Remember to add the size classes inside the class attribute separated by spaces.

4

Add aria-labels for accessibility and spacing

Add an aria-label attribute to each button describing its size: aria-label="Small button", aria-label="Medium button", and aria-label="Large button". Also, add the Bootstrap spacing class me-2 (margin end) to the first two buttons to add space between them.

Bootsrap

  
  
  
  Bootstrap Button Sizes


  
    
  

Hint

Use aria-label to describe the button for screen readers. Use me-2 class to add horizontal spacing on the right side of the first two buttons.

Practice

1. Which Bootstrap class makes a button smaller than the default size?
<button class="btn btn-primary ?">Click</button>

easy

A. btn-sm

B. btn-lg

C. btn-default

D. btn-small

Solution

1. Step 1: Understand Bootstrap button size classes

   Bootstrap uses btn-sm for small buttons and btn-lg for large buttons. The default button has no size class.

2. Step 2: Identify the class for smaller buttons

   The class btn-sm is the correct one to make a button smaller than default.

3. Final Answer:

   btn-sm -> Option A

4. Quick Check:

   Small button class = btn-sm [OK]

Hint: Small buttons use btn-sm class in Bootstrap [OK]

Common Mistakes:

• Using btn-lg for small buttons
• Using btn-default which is not a size class
• Using btn-small which does not exist

2. Which of the following is the correct syntax to create a large Bootstrap button?
<button class="btn btn-primary ?">Submit</button>

easy

A. btn-lg

B. btn-large

C. btn-big

D. btn-xl

Solution

1. Step 1: Recall Bootstrap large button class

   Bootstrap uses btn-lg to make buttons larger than the default size.

2. Step 2: Match the correct class syntax

   The correct class is btn-lg. Other options like btn-large, btn-big, or btn-xl are not valid Bootstrap classes.

3. Final Answer:

   btn-lg -> Option A

4. Quick Check:

   Large button class = btn-lg [OK]

Hint: Large buttons use btn-lg class in Bootstrap [OK]

Common Mistakes:

• Using btn-large instead of btn-lg
• Using btn-big which is not a Bootstrap class
• Using btn-xl which does not exist in Bootstrap

3. What will be the visual difference between these two buttons?

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

medium

A. Both buttons will be the same size

B. The first button is smaller, the second is default size

C. The first button is larger, the second is default size

D. The first button is default size, the second is smaller

Solution

1. Step 1: Identify button classes and their sizes

   The first button has only btn btn-primary, so it is default size. The second button adds btn-sm, making it smaller.

2. Step 2: Understand visual difference

   The second button will appear smaller than the first because of the btn-sm class.

3. Final Answer:

   The first button is default size, the second is smaller -> Option D

4. Quick Check:

   btn-sm makes button smaller [OK]

Hint: btn-sm makes button smaller than default [OK]

Common Mistakes:

• Thinking btn-sm makes button larger
• Assuming both buttons look the same
• Confusing btn-sm with btn-lg

4. Identify the error in this Bootstrap button code:

<button class="btn btn-primary btn-small">Click Me</button>

medium

A. Missing closing tag for button

B. btn-primary cannot be combined with size classes

C. btn-small is not a valid Bootstrap size class

D. btn class is missing

Solution

1. Step 1: Check Bootstrap size classes

   Bootstrap uses btn-sm and btn-lg for sizes. btn-small is not valid.

2. Step 2: Verify other classes and syntax

   The btn-primary and btn classes are correct and present. The button tag is properly closed.

3. Final Answer:

   btn-small is not a valid Bootstrap size class -> Option C

4. Quick Check:

   Use btn-sm or btn-lg for sizes [OK]

Hint: Use btn-sm or btn-lg, not btn-small [OK]

Common Mistakes:

• Using btn-small instead of btn-sm
• Thinking btn-primary can't combine with size classes
• Missing btn class in button

5. You want a form with two buttons: a large green 'Save' button and a small red 'Cancel' button. Which code snippet correctly applies Bootstrap button sizes and colors?

hard

A. <button class="btn btn-success btn-sm">Save</button> <button class="btn btn-danger btn-lg">Cancel</button>

B. <button class="btn btn-success btn-lg">Save</button> <button class="btn btn-danger btn-sm">Cancel</button>

C. <button class="btn btn-primary btn-lg">Save</button> <button class="btn btn-warning btn-sm">Cancel</button>

D. <button class="btn btn-danger btn-lg">Save</button> <button class="btn btn-success btn-sm">Cancel</button>

Solution

1. Step 1: Match button colors to meanings

   Bootstrap uses btn-success for green and btn-danger for red buttons.

2. Step 2: Apply correct sizes to buttons

   The 'Save' button should be large, so use btn-lg. The 'Cancel' button should be small, so use btn-sm.

3. Step 3: Verify the correct combination

   <button class="btn btn-success btn-lg">Save</button> <button class="btn btn-danger btn-sm">Cancel</button> correctly uses btn-success btn-lg for 'Save' and btn-danger btn-sm for 'Cancel'. Other options swap colors or sizes incorrectly.

4. Final Answer:

   <button class="btn btn-success btn-lg">Save</button> <button class="btn btn-danger btn-sm">Cancel</button> -> Option B

5. Quick Check:

   Green = btn-success, Large = btn-lg, Red = btn-danger, Small = btn-sm [OK]

Hint: Green = btn-success, Red = btn-danger, sizes btn-lg/sm [OK]

Common Mistakes:

• Swapping btn-success and btn-danger classes
• Using wrong size classes for buttons
• Mixing colors and sizes incorrectly