Custom color themes in Bootsrap - Mini Project: Build & Apply

Custom Color Themes with Bootstrap

📖 Scenario: You are building a simple webpage for a small business. The business wants to use their own colors instead of Bootstrap's default colors to match their brand.

🎯 Goal: Create a webpage using Bootstrap that applies a custom color theme by overriding Bootstrap CSS variables. The page should have a header, a button, and a footer that use the custom colors.

📋 What You'll Learn

Use Bootstrap 5 CSS from CDN

Override Bootstrap CSS variables to create a custom primary color and secondary color

Apply the custom colors to a header background, a button, and a footer background

Use semantic HTML elements:

,

,

Ensure the page is responsive and accessible with proper color contrast

💡 Why This Matters

🌍 Real World

Many businesses want their websites to match their brand colors. Overriding Bootstrap variables is a simple way to customize the look without rewriting all styles.

💼 Career

Web developers often customize frameworks like Bootstrap to meet client branding requirements while keeping responsive and accessible design.

1

Set up the basic HTML structure with Bootstrap

Create a basic HTML5 page with lang="en", meta charset="UTF-8", and viewport meta tag. Include the Bootstrap 5 CSS CDN link inside the <head>. Add a <header>, <main>, and <footer> inside the <body>. Inside the <header>, add an <h1> with the text Welcome to Our Business. Inside <main>, add a Bootstrap button with classes btn btn-primary and text Click Me. Inside <footer>, add a paragraph with text © 2024 Our Business.

Bootsrap

    
    
    Custom Theme
    


    
        
    
    
        
    
    
        
    

Hint

Remember to include the Bootstrap CSS link inside the <head> and use semantic tags for header, main, and footer.

2

Add CSS variables to configure custom colors

Inside the <head>, add a <style> block that overrides Bootstrap CSS variables --bs-primary and --bs-secondary. Set --bs-primary to #2a9d8f (a teal color) and --bs-secondary to #e76f51 (a warm orange).

Bootsrap

    
    
    Custom Theme
    
    
        /* Override Bootstrap CSS variables here */
    


    
        Welcome to Our Business
    
    
        Click Me
    
    
        © 2024 Our Business
    

Hint

Use the :root selector to override CSS variables for Bootstrap colors.

3

Apply custom colors to header and footer backgrounds

Add CSS rules inside the existing <style> block to set the background-color of the header to var(--bs-primary) and the footer to var(--bs-secondary). Also set the text color inside both to white for good contrast.

Bootsrap

    
    
    Custom Theme
    
    
        :root {
            --bs-primary: #2a9d8f;
            --bs-secondary: #e76f51;
        }
        header {
            /* Your code here */
        }
        footer {
            /* Your code here */
        }
    


    
        Welcome to Our Business
    
    
        Click Me
    
    
        © 2024 Our Business
    

Hint

Use background-color: var(--bs-primary); for the header and similarly for the footer with --bs-secondary. Set color: white; for text.

4

Add spacing and ensure button uses custom primary color

Add CSS inside the <style> block to add padding: 2rem to the main section for spacing. Confirm the button uses the Bootstrap class btn-primary so it automatically uses the custom primary color. Also add aria-label="Click the primary action button" to the button for accessibility.

Bootsrap

    
    
    Custom Theme
    
    
        :root {
            --bs-primary: #2a9d8f;
            --bs-secondary: #e76f51;
        }
        header {
            background-color: var(--bs-primary);
            color: white;
            padding: 1rem;
        }
        footer {
            background-color: var(--bs-secondary);
            color: white;
            padding: 1rem;
        }
        main {
            /* Your code here */
        }
    


    
        Welcome to Our Business
    
    
        Click Me
    
    
        © 2024 Our Business
    

Hint

Add padding to main for spacing and add the aria-label attribute to the button for accessibility.

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