Creating custom component variants in Bootsrap - Practice Exercises

Challenge - 5 Problems

🧠 Conceptual

intermediate

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

Why would a developer create custom variants of Bootstrap components instead of using the default ones?

A To match the website's unique design and branding while keeping Bootstrap's functionality.

B To remove all Bootstrap styles and write CSS from scratch.

C To make Bootstrap components load faster by removing JavaScript.

D To disable responsive behavior on all components.

💡 Hint

Think about why a website might need a unique look but still use Bootstrap's features.

Custom component variants let developers keep Bootstrap's core features but change colors, sizes, or styles to fit their brand.

📝 Syntax

intermediate

Which CSS selector correctly targets a custom Bootstrap button variant named .btn-special?

You want to style a new button variant called btn-special. Which CSS selector will apply styles only to this variant?

A button.btn-special { background-color: #ff6600; }

B .btn.btn-special { background-color: #ff6600; }

C #btn-special { background-color: #ff6600; }

D .btn-special { background-color: #ff6600; }

💡 Hint

Bootstrap buttons always have the btn class along with variant classes.

Bootstrap buttons use btn plus variant classes. The selector .btn.btn-special targets buttons with both classes.

❓ rendering

advanced

What will be the visual result of this custom Bootstrap button variant CSS?

Given this CSS for .btn-custom:

.btn.btn-custom {
  background-color: #0055aa;
  color: white;
  border-radius: 2rem;
  padding: 0.75rem 2rem;
  font-weight: bold;
}

What will the button look like in the browser?

A A large blue button with white bold text and rounded pill shape.

B A small gray button with black text and sharp corners.

C A transparent button with blue text and square edges.

D A red button with white text and no padding.

💡 Hint

Look at background color, text color, border radius, padding, and font weight.

The background is a strong blue (#0055aa), text is white and bold, padding is large making the button bigger, and border-radius 2rem creates a pill shape.

❓ selector

advanced

Which CSS selector correctly overrides Bootstrap's primary button hover style for a custom variant .btn-glow?

Bootstrap's .btn-primary:hover changes background color. You want .btn-glow:hover to have a glowing effect instead. Which selector ensures your style applies on hover?

A .btn-primary.btn-glow:hover { box-shadow: 0 0 10px #00ffcc; }

B .btn-glow:hover { box-shadow: 0 0 10px #00ffcc; }

C .btn.btn-glow:hover { box-shadow: 0 0 10px #00ffcc; }

D button.btn-glow:hover { box-shadow: 0 0 10px #00ffcc; }

💡 Hint

Bootstrap buttons always have btn plus variant classes; specificity matters.

The selector .btn.btn-glow:hover matches buttons with both classes on hover, overriding Bootstrap's .btn-primary:hover due to equal specificity and later CSS order.

❓ accessibility

expert

How should you modify a custom Bootstrap button variant to ensure it is accessible for keyboard users and screen readers?

You created a custom button variant .btn-accessible. Which practice improves accessibility the most?

A Disable keyboard focus by setting <code>tabindex="-1"</code> on the button.

B Remove all focus outlines to keep the design clean.

C Use only color changes on hover without any focus styles.

D Add <code>aria-label</code> describing the button's action and ensure focus styles are visible.

💡 Hint

Think about users who rely on keyboard navigation and screen readers.

Adding aria-label helps screen readers understand the button's purpose. Visible focus styles help keyboard users see where they are on the page.

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