Button styles and variants in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the basic class used to create a button in Bootstrap?

The basic class is <code>btn</code>. It styles an element as a button with Bootstrap's default look.

beginner

Name three Bootstrap button variant classes and their typical colors.

• btn-primary: Blue, used for main actions.
• btn-secondary: Gray, used for less important actions.
• btn-success: Green, used for positive actions like 'Save'.

intermediate

How do you make a Bootstrap button appear larger or smaller?

Add btn-lg for a large button or btn-sm for a small button alongside btn and the variant class.

beginner

What class would you add to a Bootstrap button to make it look like a link?

Use the class btn-link. It styles the button to look like a simple text link but keeps button behavior.

beginner

How can you disable a Bootstrap button so it cannot be clicked?

Add the disabled attribute to the button element or add the class disabled for links styled as buttons.

Which class combination creates a large, green Bootstrap button?

A btn btn-success btn-lg

B btn btn-primary btn-sm

C btn btn-secondary btn-lg

D btn btn-link btn-lg

The class btn-success makes the button green, and btn-lg makes it large.

What does the btn-outline-primary class do?

A Creates a button with a blue background

B Creates a button that looks like a link

C Creates a disabled button

D Creates a button with a blue border and transparent background

btn-outline-primary creates a button with a blue border and transparent background, giving a lighter style.

How do you make a Bootstrap button fill the full width of its container?

A Add class <code>btn-wide</code>

B Add class <code>btn-full</code>

C Add class <code>btn-block</code>

D Add class <code>btn-fluid</code>

The class btn-block makes the button stretch to fill the container's width.

Which attribute or class disables a Bootstrap button?

A class <code>btn-disabled</code>

B disabled attribute or class <code>disabled</code>

C readonly attribute

D class <code>btn-off</code>

Adding the disabled attribute or the class disabled disables the button.

What is the purpose of the btn-link class?

A To create a button that looks like a hyperlink

B To create a button with a link icon

C To create a button that opens a new tab

D To create a disabled button

btn-link styles the button to look like a text link but keeps button functionality.

Explain how to create different button styles in Bootstrap and when you might use each variant.

Think about how colors help users understand button importance.

Describe how to adjust the size and disabled state of Bootstrap buttons.

Consider how size changes the button's look and how disabling prevents clicks.