Creating custom component variants in Bootsrap - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a custom button variant using Bootstrap classes.

Bootsrap

<button class="btn btn-[1]">Click me</button>

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

Aprimary

Bcustom

Cdanger

Dsecondary

Attempts:

3 left

💡 Hint

Common Mistakes

Using a default Bootstrap variant like 'primary' instead of a custom name.

Forgetting the 'btn-' prefix.

The btn-custom class is used to create a custom button variant in Bootstrap.

2fill in blank

medium

Complete the CSS code to define a custom Bootstrap button variant with a blue background.

Bootsrap

.btn-[1] {
  background-color: #007bff;
  color: white;
}

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

Acustom

Bsuccess

Cinfo

Ddanger

Attempts:

3 left

💡 Hint

Common Mistakes

Using a default Bootstrap variant name like 'danger' or 'success'.

Missing the dot before the class name.

The CSS class .btn-custom defines the custom button variant styling.

3fill in blank

hard

Fix the error in the CSS selector to properly style the custom button variant.

Bootsrap

[1] {
  border-radius: 0.5rem;
}

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

Acustom

B.custom

C.btn-custom

Dbtn-custom

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the dot before the class name.

Using only part of the class name.

The CSS selector must start with a dot to target the class btn-custom.

4fill in blank

hard

Fill both blanks to create a custom button variant with hover effect.

Bootsrap

.btn-[1] {
  background-color: #28a745;
  color: white;
}
.btn-[2]:hover {
  background-color: #218838;
}

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

Asuccess

Bcustom

Cprimary

Ddanger

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the base and hover selectors.

Using default Bootstrap variant names.

Both selectors use the custom variant name custom to style the button and its hover state.

5fill in blank

hard

Fill all three blanks to create a custom button variant with padding, border, and font weight.

Bootsrap

.btn-[1] {
  padding: [2];
  border: [3];
  font-weight: bold;
}

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

Acustom

B0.75rem 1.5rem

C2px solid #0056b3

D1rem 2rem

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect CSS units or values.

Mixing up padding and border values.

The custom variant btn-custom uses padding 0.75rem 1.5rem and a solid border 2px solid #0056b3 for styling.

Practice

1. What is the main purpose of creating custom component variants in Bootstrap?

easy

A. To change the Bootstrap grid system

B. To remove default Bootstrap styles completely

C. To write JavaScript code for Bootstrap components

D. To create new styles based on existing Bootstrap components

Solution

1. Step 1: Understand Bootstrap components

   Bootstrap provides ready-made components with default styles.

2. Step 2: Purpose of custom variants

   Custom variants let you create new styles that build on these defaults without rewriting everything.

3. Final Answer:

   To create new styles based on existing Bootstrap components -> Option D

4. Quick Check:

   Custom variants = new styles from existing components [OK]

Hint: Custom variants extend styles, not replace or remove [OK]

Common Mistakes:

• Thinking custom variants remove all Bootstrap styles
• Confusing variants with JavaScript functionality
• Believing variants change grid layout

2. Which of the following is the correct way to define a custom button variant in Bootstrap SCSS?

easy

A. button-variant($btn-custom-color, #fff); $btn-custom-color: #ff6600;

B. $btn-custom-color: #ff6600; @include button-variant($btn-custom-color, #fff);

C. @include button-variant(#fff, $btn-custom-color); $btn-custom-color: #ff6600;

D. $btn-custom-color: #ff6600; button-variant(#fff, $btn-custom-color);

Solution

1. Step 1: Define color variable first

   You must declare the color variable before using it in mixins.

2. Step 2: Use the button-variant mixin correctly

   The mixin syntax is @include button-variant(background-color, text-color); so $btn-custom-color first, then #fff.

3. Final Answer:

   $btn-custom-color: #ff6600; @include button-variant($btn-custom-color, #fff); -> Option B

4. Quick Check:

   Variable first, then mixin with correct order [OK]

Hint: Declare variables before mixins; mixin args: background, text color [OK]

Common Mistakes:

• Using mixin before defining variables
• Swapping background and text colors in mixin
• Forgetting @include keyword

3. Given this SCSS code snippet, what will be the background color of the button with class btn-custom?

$btn-custom-bg: #28a745;
@include button-variant($btn-custom-bg, #fff);

Test

medium

A. #28a745 (green)

B. #fff (white)

C. Default Bootstrap button color

D. No background color applied

Solution

1. Step 1: Understand button-variant mixin

   The mixin sets the background color to the first argument and text color to the second.

2. Step 2: Check variable value

   $btn-custom-bg is #28a745, a green shade, so background becomes green.

3. Final Answer:

   #28a745 (green) -> Option A

4. Quick Check:

   Mixin background color = #28a745 [OK]

Hint: First mixin argument sets background color [OK]

Common Mistakes:

• Confusing background and text colors
• Expecting default Bootstrap colors
• Ignoring variable value

4. You wrote this SCSS to create a custom variant but the button does not show the new style:

$btn-special-bg: #ff5733;
@include button-variant($btn-special-bg, #fff);

What is the most likely reason your custom variant btn-special is not working?

medium

A. You need to import Bootstrap JavaScript for styles to work

B. You used the wrong color code format

C. You forgot to add the custom class btn-special to the button element

D. You must use !important in SCSS to override styles

Solution

1. Step 1: Check SCSS usage

   The SCSS defines styles for the btn-special class but does not apply it automatically.

2. Step 2: Confirm HTML class usage

   To see the style, the button element must have class btn-special along with btn.

3. Final Answer:

   You forgot to add the custom class btn-special to the button element -> Option C

4. Quick Check:

   Custom class must be on element to apply styles [OK]

Hint: Add your custom class to HTML element to see styles [OK]

Common Mistakes:

• Assuming SCSS applies styles without HTML class
• Thinking JavaScript is needed for CSS styles
• Using !important unnecessarily

5. You want to create a custom Bootstrap card variant with a blue border and light blue background. Which SCSS code correctly creates a card-blue variant and applies it to a card?

hard

A. $card-blue-border: #007bff;
$card-blue-bg: #cce5ff;
.card-blue {
border: 1px solid $card-blue-border;
background-color: $card-blue-bg;
@include card-border-radius;
padding: 1rem;
}

Content

B. $card-blue-border: #007bff;
.card-blue {
border-color: $card-blue-border;
background-color: #cce5ff;
}

Content

C. $card-blue-bg: #cce5ff;
.card-blue {
border: 1px solid blue;
background-color: $card-blue-bg;
}

Content

D. $card-blue-border: #007bff;
$card-blue-bg: #cce5ff;
@include card-variant($card-blue-border, $card-blue-bg);

Content

Solution

1. Step 1: Define variables and styles properly

   $card-blue-border: #007bff; $card-blue-bg: #cce5ff; .card-blue { border: 1px solid $card-blue-border; background-color: $card-blue-bg; @include card-border-radius; padding: 1rem; }
   Content defines border and background colors as variables, then uses them in a CSS class with proper properties and Bootstrap mixin for border radius.

2. Step 2: Apply class with Bootstrap card class

   The HTML uses both card and card-blue classes to keep Bootstrap card styles and add custom variant styles.

3. Final Answer:

   Option A code correctly creates and applies the custom card variant -> Option A

4. Quick Check:

   Custom variant needs variables, CSS rules, and combined classes [OK]

Hint: Combine Bootstrap class with custom class for variants [OK]

Common Mistakes:

• Not combining custom class with Bootstrap base class
• Missing border or background properties
• Using undefined mixins or wrong mixin names