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.