Button styles and variants in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a primary Bootstrap button.

Bootsrap

<button type="button" class="btn btn-[1]">Primary</button>

Drag options to blanks, or click blank then click option'

Aprimary

Bsecondary

Cdanger

Dsuccess

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'btn-primary' directly in the blank instead of just 'primary'.

Choosing a color variant that doesn't match the button label.

The class btn-primary styles the button with Bootstrap's primary color.

2fill in blank

medium

Complete the code to create a Bootstrap button with a danger style.

Bootsrap

<button type="button" class="btn btn-[1]">Delete</button>

Drag options to blanks, or click blank then click option'

Asuccess

Bwarning

Cinfo

Ddanger

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'btn-danger' in the blank instead of just 'danger'.

Choosing a color that does not convey danger.

The class btn-danger styles the button with a red color indicating danger.

3fill in blank

hard

Fix the error in the button class to make it a Bootstrap success button.

Bootsrap

<button type="button" class="btn btn-[1]">Save</button>

Drag options to blanks, or click blank then click option'

Asuccess

Bsecondary

Cprimary

Ddanger

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'danger' or 'primary' instead of 'success'.

Including 'btn-' prefix inside the blank.

The correct class suffix for a green success button is success.

4fill in blank

hard

Fill both blanks to create a large, outline primary Bootstrap button.

Bootsrap

<button type="button" class="btn btn-[1] btn-[2]">Click Me</button>

Drag options to blanks, or click blank then click option'

Aoutline-primary

Blg

Csm

Dprimary

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing size and style classes incorrectly.

Using 'primary' instead of 'outline-primary' for outline style.

The class btn-lg makes the button large, and btn-outline-primary gives it an outlined primary style.

5fill in blank

hard

Fill all three blanks to create a small, disabled, secondary Bootstrap button.

Bootsrap

<button type="button" class="btn btn-[1] btn-[2]" disabled>[3]</button>

Drag options to blanks, or click blank then click option'

Asecondary

Bsm

CDisabled

Dprimary

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'primary' instead of 'secondary' for color.

Forgetting to add the 'disabled' attribute (though not part of blanks).

Using wrong text inside the button.

btn-secondary styles the button with a secondary color, btn-sm makes it small, and the button text is 'Disabled'. The disabled attribute disables the 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