Creating custom component variants in Bootsrap - Quick Revision & Summary

Recall & Review

beginner

What is a custom component variant in Bootstrap?

A custom component variant is a new style version of a Bootstrap component created by adding your own CSS or Sass to change colors, sizes, or other styles while keeping the original component's structure.

intermediate

How do you create a new button variant in Bootstrap using Sass?

You create a new button variant by defining a new color variable and then adding it to the Bootstrap button variants map in your Sass file before compiling.

intermediate

Why use Bootstrap's Sass variables and maps to create variants instead of plain CSS?

Using Sass variables and maps keeps your styles consistent, easy to update, and integrates well with Bootstrap's theming system, making maintenance simpler.

beginner

What role does the _variables.scss file play in creating custom variants?

The _variables.scss file holds Bootstrap's default style variables. You can override or add new variables here to customize or create new variants.

intermediate

How can you ensure your custom variant is responsive and accessible?

Use Bootstrap's utility classes for responsiveness and follow accessibility best practices like proper ARIA roles, keyboard focus styles, and sufficient color contrast.

Which file do you typically modify to add a new Bootstrap button variant using Sass?

A custom.css

B index.html

C bootstrap.js

D _variables.scss

The _variables.scss file contains Bootstrap's style variables where you can add or override variables to create new variants.

What is the main advantage of using Sass maps for custom variants in Bootstrap?

A They disable Bootstrap's default styles

B They automatically generate JavaScript code

C They allow grouping variant styles for easy management

D They convert CSS to HTML

Sass maps let you group variant styles so you can manage and generate them efficiently with Bootstrap's mixins.

To create a new button variant named 'sunshine', which Bootstrap mixin would you use?

A button-variant

B alert-variant

C card-variant

D badge-variant

The button-variant mixin is used to create new button styles in Bootstrap.

Which CSS property is important to check for accessibility when creating custom variants?

A font-family

B color contrast

C border-radius

D box-shadow

Color contrast ensures text is readable for users with visual impairments.

What is the best practice to keep your custom Bootstrap variants maintainable?

A Use Sass variables and maps

B Write inline styles in HTML

C Use !important in CSS

D Avoid using Bootstrap classes

Using Sass variables and maps keeps your styles organized and easy to update.

Explain the steps to create a new button variant in Bootstrap using Sass.

Think about how Bootstrap uses variables and maps to generate styles.

Describe how to ensure your custom Bootstrap component variant is accessible and responsive.

Accessibility means everyone can use it comfortably.

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