Custom color themes in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Bootstrap Custom Color Variables

Which CSS variable should you override to change the primary color in a Bootstrap custom theme?

A --bs-primary

B --primary-color

C --theme-primary

D --color-primary

💡 Hint

Bootstrap uses a specific naming pattern for its CSS variables starting with '--bs-'.

Bootstrap defines its colors using CSS variables prefixed with --bs-. The primary color is controlled by --bs-primary. Overriding this variable changes the primary color throughout the theme.

📝 Syntax

intermediate

Correct Syntax to Override Bootstrap Primary Color

Which CSS snippet correctly overrides the Bootstrap primary color to a blue shade (#007bff)?

Bootsrap

:root {
  /* Your code here */
}

A --bs-primary: #007bff;

B ;ffb700# :yramirp-sb--

C --bs-primary = #007bff;

D --primary: #007bff;

💡 Hint

Remember CSS custom properties must be inside a selector block and use colon, not equals.

CSS variables must be declared inside a selector block like :root with a colon : separating the name and value. Option A correctly places the variable inside :root with proper syntax.

❓ rendering

advanced

Visual Result of Custom Primary Color

Given this CSS override, what color will the Bootstrap primary button display?

Bootsrap

:root {
  --bs-primary: #28a745;
}

<button class="btn btn-primary">Click me</button>

A A gray button with no color

B A blue button with default Bootstrap primary color

C A green button with hex color #28a745

D A red button with hex color #dc3545

💡 Hint

The primary button uses the --bs-primary variable for its background color.

Overriding --bs-primary to #28a745 changes the primary button's background color to green. The button uses this variable for its styling.

❓ selector

advanced

Targeting Bootstrap Components for Custom Colors

Which CSS selector correctly targets all Bootstrap alert components to use a custom background color variable --bs-alert-bg?

A #alert { background-color: var(--bs-alert-bg); }

B .alert { background-color: var(--bs-alert-bg); }

C alert { background-color: var(--bs-alert-bg); }

D .alerts { background-color: var(--bs-alert-bg); }

💡 Hint

Bootstrap alerts use the class alert on their container elements.

The correct selector for Bootstrap alerts is the class .alert. Option B uses this class selector properly to apply the custom background color.

❓ accessibility

expert

Ensuring Accessible Contrast in Custom Color Themes

You changed the Bootstrap primary color to a dark purple (#3a0ca3). What is the best practice to ensure the primary button text remains accessible?

A Remove the button text to avoid contrast issues.

B Keep the button text color as default black (#000000).

C Use the same purple color for button text as background.

D Set the button text color to white (#ffffff) for good contrast.

💡 Hint

Good contrast means text stands out clearly from the background color.

Dark backgrounds require light text for readability. Setting the button text color to white ensures sufficient contrast and accessibility compliance.

Practice

1. What is the main purpose of creating a custom color theme in Bootstrap?

easy

A. To disable Bootstrap's grid system

B. To add new Bootstrap components

C. To change Bootstrap's default colors to match your brand

D. To increase the font size globally

Solution

1. Step 1: Understand Bootstrap's default colors

   Bootstrap comes with preset colors that style buttons, backgrounds, and text.

2. Step 2: Purpose of custom color themes

   Custom color themes let you replace these default colors with your own brand colors for consistency.

3. Final Answer:

   To change Bootstrap's default colors to match your brand -> Option C

4. Quick Check:

   Custom colors = brand matching [OK]

Hint: Custom themes change colors to fit your brand [OK]

Common Mistakes:

• Thinking custom themes add new components
• Confusing color themes with layout changes
• Assuming it disables Bootstrap features

2. Which CSS selector is commonly used to define custom color variables for Bootstrap themes?

easy

A. html

B. .custom-theme

C. body

D. :root

Solution

1. Step 1: Identify where CSS variables are defined

   CSS variables for themes are usually set globally for easy access.

2. Step 2: Recognize the :root selector

   :root targets the highest-level element in the document, perfect for global variables.

3. Final Answer:

   :root -> Option D

4. Quick Check:

   Global CSS variables = :root [OK]

Hint: Use :root for global CSS variables [OK]

Common Mistakes:

• Using class selectors instead of :root
• Defining variables inside body or html only
• Confusing :root with other pseudo-classes

3. Given this CSS snippet, what color will the primary button have?

:root { --bs-primary: #ff5733; }
.btn-primary { background-color: var(--bs-primary); }

medium

A. #ff5733 (a bright orange-red)

B. #007bff (Bootstrap default blue)

C. Transparent

D. Black

Solution

1. Step 1: Check the CSS variable definition

   --bs-primary is set to #ff5733 in :root, overriding default.

2. Step 2: Understand button background color

   .btn-primary uses var(--bs-primary), so it uses #ff5733 as background.

3. Final Answer:

   #ff5733 (a bright orange-red) -> Option A

4. Quick Check:

   Button color = var(--bs-primary) = #ff5733 [OK]

Hint: Button uses var(--bs-primary) color [OK]

Common Mistakes:

• Assuming default blue color remains
• Ignoring CSS variable override
• Confusing variable name with value

4. What is wrong with this CSS if the custom primary color does not apply?

:root {
  --bs-primary: #28a745
}
.btn-primary {
  background-color: var(--bs-primary);
}

medium

A. Missing semicolon after color value in :root

B. Wrong variable name used in .btn-primary

C. CSS variables cannot be used in Bootstrap

D. The color code #28a745 is invalid

Solution

1. Step 1: Check CSS syntax in :root

   CSS declarations should end with a semicolon after each property value; missing after #28a745.

2. Step 2: Effect of missing semicolon

   Without semicolon, CSS parsing can break (especially with additional properties), causing the variable to be ignored.

3. Final Answer:

   Missing semicolon after color value in :root -> Option A

4. Quick Check:

   CSS syntax error = missing semicolon [OK]

Hint: Always end CSS declarations with semicolon [OK]

Common Mistakes:

• Assuming variable name is wrong
• Thinking CSS variables don't work in Bootstrap
• Believing color code is invalid

5. You want to create a dark theme by changing Bootstrap's background and text colors using CSS variables. Which code snippet correctly sets a dark background and light text for the whole page?

hard

A. html { --bs-body-bg: black; --bs-body-color: white; } .container { background-color: var(--bs-body-bg); color: var(--bs-body-color); }

B. :root { --bs-body-bg: #000000; --bs-body-color: #ffffff; } body { background-color: var(--bs-body-bg); color: var(--bs-body-color); }

C. :root { background-color: #000000; color: #ffffff; }

D. body { --bs-body-bg: #000000; --bs-body-color: #ffffff; }

Solution

1. Step 1: Define CSS variables globally

   Use :root to set --bs-body-bg and --bs-body-color for global theme colors.

2. Step 2: Apply variables to body styles

   Set body's background-color and color using the CSS variables for consistent theme.

3. Step 3: Check other options

   Defining variables on html but applying only to .container limits the theme to containers; defining variables on body without applying them to styles shows no visible change; setting colors directly on :root bypasses CSS variables.

4. Final Answer:

   :root { --bs-body-bg: #000000; --bs-body-color: #ffffff; } body { background-color: var(--bs-body-bg); color: var(--bs-body-color); } -> Option B

5. Quick Check:

   Global variables + body styles = dark theme [OK]

Hint: Set variables in :root and apply on body [OK]

Common Mistakes:

• Defining variables but not applying them
• Setting colors directly without variables
• Applying variables only to container, not whole page