Button sizes in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a small Bootstrap button.

Bootsrap

<button type="button" class="btn btn-primary btn-[1]">Small Button</button>

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

Alg

Bsm

Cmd

Dxl

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'btn-md' which is not a valid Bootstrap size class.

Using 'btn-xl' which does not exist in Bootstrap button sizes.

The class btn-sm makes the button small in Bootstrap.

2fill in blank

medium

Complete the code to create a large Bootstrap button.

Bootsrap

<button type="button" class="btn btn-success btn-[1]">Large Button</button>

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

Asm

Bmd

Clg

Dxs

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'btn-xs' which is not a valid Bootstrap button size.

Using 'btn-md' which is the default size and does not change button size.

The class btn-lg makes the button large in Bootstrap.

3fill in blank

hard

Fix the error in the button size class to make the button medium size.

Bootsrap

<button type="button" class="btn btn-danger btn-[1]">Medium Button</button>

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

Amd

Bsm

Clg

Dxs

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'btn-xs' which is not a valid Bootstrap size.

Using 'btn-sm' or 'btn-lg' which changes the size to small or large.

Bootstrap uses btn-md for medium size buttons, but actually medium is the default size and does not require a size class. However, if you want to explicitly specify, btn-md is used in some contexts.

4fill in blank

hard

Fill both blanks to create a large, secondary Bootstrap button with the correct size class.

Bootsrap

<button type="button" class="btn btn-[1] btn-[2]">Large Secondary Button</button>

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

Asecondary

Blg

Cprimary

Dsm

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the order of color and size classes.

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

The class btn-secondary sets the button color to secondary, and btn-lg sets the button size to large.

5fill in blank

hard

Fill all three blanks to create a small, outline-danger Bootstrap button with the correct classes.

Bootsrap

<button type="button" class="btn btn-[1] btn-outline-[2] btn-[3]">Small Outline Danger Button</button>

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

Abtn

Bdanger

Csm

Dprimary

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'btn-outline-primary' instead of 'btn-outline-danger'.

Forgetting the base 'btn' class.

Using 'lg' instead of 'sm' for size.

The class btn is the base button class, btn-outline-danger creates an outline style with danger color, and btn-sm makes the button small.