Creating custom component variants in Bootsrap

Introduction

Custom component variants let you change how Bootstrap parts look to fit your style. It helps your website feel unique and match your brand.

You want buttons with your brand colors instead of default Bootstrap colors.

You need alerts that look different for special messages.

You want cards with a unique background or border style.

You want to reuse a style easily across many components.

You want to keep Bootstrap but add your own style twist.

Syntax

Bootsrap

/* Define a new color variant using CSS custom properties */
.btn-custom {
  --bs-btn-bg: #4a90e2;
  --bs-btn-color: white;
  --bs-btn-border-color: #4a90e2;
}

<!-- Use the new variant class on a button -->
<button class="btn btn-custom">Custom Button</button>

You create a new class that changes Bootstrap CSS variables.

Apply your new class along with Bootstrap's base class like btn.

Examples

This example makes a green button variant using Bootstrap variables.

Bootsrap

/* Custom button variant with green background */
.btn-success-custom {
  --bs-btn-bg: #28a745;
  --bs-btn-color: white;
  --bs-btn-border-color: #28a745;
}

<button class="btn btn-success-custom">Green Button</button>

This example creates a purple alert by adding a new class with custom colors.

Bootsrap

/* Custom alert variant with purple background */
.alert-purple {
  background-color: #6f42c1;
  color: white;
  border: 1px solid #6f42c1;
}

<div class="alert alert-purple" role="alert">Purple Alert</div>

Sample Program

This page shows a button with a custom orange color variant using Bootstrap's CSS variables.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Custom Bootstrap Variant</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <style>
    .btn-custom {
      --bs-btn-bg: #ff5722;
      --bs-btn-color: white;
      --bs-btn-border-color: #ff5722;
    }
  </style>
</head>
<body class="p-3">
  <button class="btn btn-custom">Custom Orange Button</button>
</body>
</html>

Important Notes

Use CSS custom properties to change Bootstrap component colors easily.

Always keep the base Bootstrap class (like btn) for proper styling and behavior.

Test your custom variant on different screen sizes to keep it responsive.

Summary

Custom variants let you change Bootstrap components to match your style.

Use CSS variables inside a new class to create your variant.

Apply your custom class alongside Bootstrap classes on elements.

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