Button styles and variants in Bootsrap - Mini Project: Build & Apply

Button styles and variants

📖 Scenario: You are creating a simple webpage that shows different button styles using Bootstrap. This will help users see how buttons can look with different colors and sizes.

🎯 Goal: Build a webpage with a header and four buttons. Each button uses a different Bootstrap style variant: primary, secondary, success, and danger.

📋 What You'll Learn

Use Bootstrap 5 CSS from CDN

Create a header with the text 'Bootstrap Button Variants'

Add four buttons with classes: btn-primary, btn-secondary, btn-success, btn-danger

Buttons should have the text: 'Primary', 'Secondary', 'Success', 'Danger'

Use semantic HTML and include lang, charset, and viewport meta tags

💡 Why This Matters

🌍 Real World

Buttons are everywhere on websites and apps. Knowing how to style them with Bootstrap helps you build user-friendly interfaces quickly.

💼 Career

Web developers often use Bootstrap to create consistent and accessible buttons that work well on all devices.

1

Create the basic HTML structure

Create a basic HTML5 document with lang="en", <head> containing <meta charset="UTF-8"> and <meta name="viewport" content="width=device-width, initial-scale=1">. Add a <body> with a <header> containing an <h1> with the text Bootstrap Button Variants.

Bootsrap

Hint

Remember to include the lang attribute in the <html> tag and the required meta tags inside <head>.

2

Add Bootstrap CSS link

Inside the <head>, add the Bootstrap 5 CSS CDN link: <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">.

Bootsrap

    
    
    Button styles and variants
    


    
        Bootstrap Button Variants
    

Hint

Use the official Bootstrap 5 CSS CDN link inside the <head> section.

3

Add four Bootstrap buttons with different variants

Inside the <body> after the <header>, add four <button> elements with classes btn btn-primary, btn btn-secondary, btn btn-success, and btn btn-danger. The buttons should have the text Primary, Secondary, Success, and Danger respectively.

Bootsrap

    
    
    Button styles and variants
    


    
        Bootstrap Button Variants
    
    

Hint

Use the Bootstrap button classes btn plus the variant classes like btn-primary on each button.

4

Make buttons accessible and add spacing

Add aria-label attributes to each button matching their text (e.g., aria-label="Primary button"). Also, add the Bootstrap class m-2 to each button to add margin spacing around them.

Bootsrap

    
    
    Button styles and variants
    


    
        Bootstrap Button Variants
    
    

Hint

Use the aria-label attribute for accessibility and add the Bootstrap margin class m-2 to each button.

Practice

1. Which Bootstrap class combination correctly creates a blue primary button?

easy

A. btn btn-secondary

B. btn btn-danger

C. btn btn-warning

D. btn btn-primary

Solution

1. Step 1: Understand Bootstrap button base class

   All Bootstrap buttons require the base class btn to apply button styles.

2. Step 2: Identify the variant for blue color

   The btn-primary class applies the blue color variant to the button.

3. Final Answer:

   <button class='btn btn-primary'> -> Option D

4. Quick Check:

   Blue primary button = btn btn-primary [OK]

Hint: Primary buttons always use btn-primary class [OK]

Common Mistakes:

• Using btn-danger for blue instead of red
• Omitting the base btn class
• Confusing btn-secondary with btn-primary

2. Which of the following is the correct syntax to create a small green success button in Bootstrap?

easy

A. <button class='btn btn-primary btn-sm'>Success</button>

B. <button class='btn btn-success btn-sm'>Success</button>

C. <button class='btn btn-success btn-lg'>Success</button>

D. <button class='btn btn-danger btn-sm'>Success</button>

Solution

1. Step 1: Identify the success variant class

   The green color for success buttons is applied with btn-success.

2. Step 2: Choose the small size modifier

   The class btn-sm makes the button smaller in size.

3. Final Answer:

   <button class='btn btn-success btn-sm'>Success</button> -> Option B

4. Quick Check:

   Small green button = btn-success btn-sm [OK]

Hint: Use btn-sm for small size and btn-success for green [OK]

Common Mistakes:

• Using btn-lg instead of btn-sm for small size
• Mixing btn-primary with success text
• Forgetting the btn base class

3. What color will the button have when using this code?

<button class='btn btn-warning btn-lg'>Warning</button>

medium

A. Yellow

B. Red

C. Blue

D. Green

Solution

1. Step 1: Identify the variant class

   The class btn-warning applies a yellow/orange color to the button.

2. Step 2: Understand the size modifier

   The btn-lg class makes the button larger but does not affect color.

3. Final Answer:

   Yellow -> Option A

4. Quick Check:

   btn-warning = Yellow color [OK]

Hint: Warning buttons use btn-warning for yellow color [OK]

Common Mistakes:

• Confusing btn-warning with btn-danger (red)
• Thinking btn-lg changes color
• Mixing btn-primary with warning text

4. Identify the error in this Bootstrap button code:

<button class='btn btn-info btn-small'>Info</button>

medium

A. btn-info is not a valid variant

B. Button text should be uppercase

C. btn-small is not a valid size class

D. Missing btn base class

Solution

1. Step 1: Check variant class validity

   btn-info is a valid Bootstrap variant for a light blue button.

2. Step 2: Verify size class correctness

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

3. Final Answer:

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

4. Quick Check:

   Size classes are btn-sm or btn-lg only [OK]

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

Common Mistakes:

• Using btn-small instead of btn-sm
• Assuming btn-info is invalid
• Forgetting btn base class (not the case here)

5. You want a dark-themed button that is large and has a warning color. Which class combination achieves this correctly?

hard

A. btn btn-dark btn-lg

B. btn btn-warning btn-lg

C. btn btn-warning btn-dark btn-lg

D. btn btn-dark-warning btn-lg

Solution

1. Step 1: Understand Bootstrap button variants

   Bootstrap does not have a combined variant like btn-dark-warning. Variants are separate classes like btn-warning (yellow) or btn-dark (dark gray).

2. Step 2: Choose the correct variant for dark theme

   The dark theme is applied by btn-dark. Adding btn-warning alongside it causes conflicting colors.

3. Step 3: Apply large size modifier

   The btn-lg class correctly makes the button large.

4. Final Answer:

   btn btn-dark btn-lg -> Option A

5. Quick Check:

   Use one variant class plus size class [OK]

Hint: Use only one variant class with size class for correct style [OK]

Common Mistakes:

• Combining multiple variant classes causing style conflicts
• Using non-existent combined variant classes
• Forgetting the btn base class