Bootsrapmarkup~30 mins

Button sizes in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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.

Progress0 / 4 steps

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

Need a hint?

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

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

Need a hint?

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

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

Need a hint?

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

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

Need a 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.