Button sizes in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What class do you use in Bootstrap to make a button larger?

Use the class btn-lg to make a Bootstrap button larger than the default size.

beginner

How do you make a Bootstrap button smaller than the default size?

Add the class btn-sm to the button element to make it smaller.

beginner

What is the default size of a Bootstrap button if no size class is added?

The default Bootstrap button size has no extra size class like <code>btn-lg</code> or <code>btn-sm</code>. It uses the base <code>btn</code> class.

beginner

Show the HTML code for a large primary Bootstrap button.

Example:

<button type="button" class="btn btn-primary btn-lg">Large Button</button>

beginner

Can you combine size classes like btn-lg and btn-sm on the same button?

No, you should only use one size class per button. Using both <code>btn-lg</code> and <code>btn-sm</code> will cause conflicts and unexpected results.

Which class makes a Bootstrap button smaller?

A btn-mini

B btn-lg

C btn-small

D btn-sm

The correct class for a smaller button is btn-sm. The others are not valid Bootstrap size classes.

What happens if you do not add any size class to a Bootstrap button?

A Button is extra large

B Button is default size

C Button is hidden

D Button is disabled

Without a size class, the button uses the default Bootstrap size.

Which class combination is correct for a large danger button?

A btn btn-danger btn-small

B btn btn-lg btn-danger btn-sm

C btn btn-danger btn-lg

D btn btn-danger btn-large

Use btn, the color class btn-danger, and the size class btn-lg for a large danger button.

Can you use btn-lg and btn-sm together on one button?

A No, it causes conflicts

B Yes, it makes the button medium size

C Yes, it doubles the size

D No, it disables the button

Only one size class should be used to avoid conflicts.

Which Bootstrap class is NOT related to button size?

A btn-default

B btn-sm

C btn-block

D btn-lg

btn-default is not a size class; it was used in older Bootstrap versions for default button style.

Explain how to change the size of a button in Bootstrap and give examples.

Think about the classes you add to the button element.

Describe why you should not combine multiple size classes on a single Bootstrap button.

Consider how CSS classes override each other.