Creating custom component variants in Bootsrap - Try It Yourself

Creating Custom Bootstrap Button Variants

📖 Scenario: You are building a website and want to create a special style for buttons that matches your brand colors. Bootstrap has default button styles, but you want to add your own custom button variant called btn-brand with a unique background and text color.

🎯 Goal: Create a custom Bootstrap button variant named btn-brand that uses a blue background and white text. Then use this new button variant in your HTML to show a button labeled Click Me.

📋 What You'll Learn

Create a CSS class named btn-brand that sets the background color to #007bff (blue) and text color to white.

Add a hover effect that changes the background color to a darker blue #0056b3.

Use the Bootstrap btn base class along with your btn-brand class on a button element.

The button text must be exactly Click Me.

💡 Why This Matters

🌍 Real World

Customizing Bootstrap components helps you match your website's branding and create a unique look while still using a popular framework.

💼 Career

Web developers often need to extend or override framework styles to meet design requirements, making this skill valuable in frontend development roles.

1

Create the HTML button with Bootstrap base class

Write an HTML <button> element with the Bootstrap class btn and the text Click Me inside the <body> tag.

Bootsrap

    
    
    Custom Bootstrap Button
    


    

Hint

Use the <button> tag with class="btn" and put the text Click Me inside.

2

Add a CSS style block for the custom button variant

Inside the <head> tag, add a <style> block. Inside it, create a CSS class named .btn-brand that sets background-color to #007bff and color to white.

Bootsrap

    
    
    Custom Bootstrap Button
    
    


    Click Me

Hint

Use a <style> tag and define .btn-brand with the correct colors.

3

Add a hover effect to the custom button variant

Inside the existing <style> block, add a CSS rule for .btn-brand:hover that changes the background-color to #0056b3.

Bootsrap

    
    
    Custom Bootstrap Button
    
    
        .btn-brand {
            background-color: #007bff;
            color: white;
        }
        /* Add hover effect for .btn-brand here */
    


    Click Me

Hint

Add a CSS rule for .btn-brand:hover inside the style block to change the background color on hover.

4

Apply the custom variant class to the button

Modify the <button> element to have both btn and btn-brand classes so the button uses your custom style.

Bootsrap

    
    
    Custom Bootstrap Button
    
    
        .btn-brand {
            background-color: #007bff;
            color: white;
        }
        .btn-brand:hover {
            background-color: #0056b3;
        }
    


    
    Click Me

Hint

Add btn-brand to the button's class attribute alongside btn.

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