Why customization avoids generic look in Bootsrap - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a Bootstrap button with a primary color.

Bootsrap

<button class="btn btn-[1]">Click me</button>

Drag options to blanks, or click blank then click option'

Aprimary

Bdanger

Csuccess

Dwarning

Attempts:

3 left

💡 Hint

Common Mistakes

Using btn-danger or btn-warning which change the button color to red or yellow.

Forgetting to add the btn class.

The class btn-primary applies the primary blue color style to the button, making it stand out.

2fill in blank

medium

Complete the code to customize the button size to large using Bootstrap classes.

Bootsrap

<button class="btn btn-primary btn-[1]">Large Button</button>

Drag options to blanks, or click blank then click option'

Axl

Blg

Cmd

Dsmall

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'small' or 'md' which are not valid Bootstrap button size classes.

Using 'xl' which is not a Bootstrap button size.

The class btn-lg makes the button larger than the default size.

3fill in blank

hard

Fix the error in the code to apply a custom background color using Bootstrap utility classes.

Bootsrap

<div class="bg-[1] text-white p-3">Custom Background</div>

Drag options to blanks, or click blank then click option'

Ablue

Bdark

Ccustom

Dprimary

Attempts:

3 left

💡 Hint

Common Mistakes

Using colors not defined in Bootstrap like 'blue' or 'custom'.

Forgetting to add text color for contrast.

Bootstrap uses predefined color names like 'primary' for background utilities, not arbitrary names like 'blue' or 'custom'.

4fill in blank

hard

Fill both blanks to create a Bootstrap card with a shadow and rounded corners.

Bootsrap

<div class="card [1] [2]">
  <div class="card-body">
    This is a card with shadow and rounded corners.
  </div>
</div>

Drag options to blanks, or click blank then click option'

Ashadow

Brounded

Cborder

Dtext-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'border' which adds a border but not shadow or rounding.

Using 'text-center' which centers text but does not affect card shape.

The shadow class adds a shadow effect, and rounded adds rounded corners to the card.

5fill in blank

hard

Fill all three blanks to create a responsive Bootstrap grid with three equal columns on large screens.

Bootsrap

<div class="container">
  <div class="row">
    <div class="col-[1] col-md-[2] col-lg-[3]">Column 1</div>
    <div class="col-[1] col-md-[2] col-lg-[3]">Column 2</div>
    <div class="col-[1] col-md-[2] col-lg-[3]">Column 3</div>
  </div>
</div>

Drag options to blanks, or click blank then click option'

A12

B6

C4

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same column size for all breakpoints causing layout issues.

Choosing numbers that don't add up to 12 or don't divide evenly.

On extra small screens, columns take full width (12). On medium screens, half width (6). On large screens, one-third width (4) for three equal columns.

Practice

1. Why is it important to customize Bootstrap styles instead of using them as-is?

easy

A. To make your website look unique and not like many others

B. Because Bootstrap styles do not work without customization

C. To make the website load faster

D. Because customization removes all Bootstrap features

Solution

1. Step 1: Understand Bootstrap default styles

   Bootstrap provides ready-made styles that many websites use, so they often look similar.

2. Step 2: Recognize the effect of customization

   Changing colors, fonts, or shapes makes your site stand out and feel unique to users.

3. Final Answer:

   To make your website look unique and not like many others -> Option A

4. Quick Check:

   Customization = Unique look [OK]

Hint: Customization makes your site unique, not generic [OK]

Common Mistakes:

• Thinking Bootstrap styles must be customized to work
• Believing customization slows down the site
• Assuming customization removes Bootstrap features

2. Which of the following is the correct way to customize Bootstrap colors using CSS variables?

easy

A. div { --primary: #ff5733; }

B. body { primary-color: #ff5733; }

C. html { color-primary: #ff5733; }

D. :root { --bs-primary: #ff5733; }

Solution

1. Step 1: Identify Bootstrap CSS variable syntax

   Bootstrap uses CSS custom properties like --bs-primary to define colors.

2. Step 2: Check correct usage in CSS

   Variables are set inside :root for global effect, so :root { --bs-primary: #ff5733; } is correct.

3. Final Answer:

   :root { --bs-primary: #ff5733; } -> Option D

4. Quick Check:

   CSS variables start with --bs- and set in :root [OK]

Hint: Use :root and --bs- prefix for Bootstrap variables [OK]

Common Mistakes:

• Using wrong property names like primary-color
• Setting variables inside wrong selectors
• Missing the --bs- prefix

3. What will be the visible difference if you add this CSS to a Bootstrap button?

button.btn-primary { background-color: #28a745; }

medium

A. The button background changes to green instead of blue

B. The button text color changes to green

C. The button size increases

D. No visible change happens

Solution

1. Step 1: Understand the CSS selector and property

   The selector targets buttons with class btn-primary and changes their background color.

2. Step 2: Predict visual effect

   Changing background-color to #28a745 (green) replaces the default blue background.

3. Final Answer:

   The button background changes to green instead of blue -> Option A

4. Quick Check:

   Changing background-color changes button color [OK]

Hint: Background-color changes button color visually [OK]

Common Mistakes:

• Confusing background color with text color
• Expecting size change from color property
• Thinking no change occurs without !important

4. You tried to customize Bootstrap button color by adding this CSS:

.btn-primary { color: red; }

But the button text color did not change. What is the likely reason?

medium

A. Bootstrap buttons cannot have their text color changed

B. Bootstrap's default styles have higher priority and override your CSS

C. You must use inline styles to override Bootstrap

D. The CSS selector is incorrect and does not match buttons

Solution

1. Step 1: Understand CSS priority and specificity

   Bootstrap styles often use specific selectors or !important, which can override simple CSS rules.

2. Step 2: Recognize why your CSS might be ignored

   Your rule .btn-primary { color: red; } may be overridden by Bootstrap's more specific or important styles.

3. Final Answer:

   Bootstrap's default styles have higher priority and override your CSS -> Option B

4. Quick Check:

   Bootstrap styles override simple CSS without higher specificity [OK]

Hint: Bootstrap styles may override simple CSS rules [OK]

Common Mistakes:

• Assuming selector is wrong without checking specificity
• Thinking inline styles are always needed
• Believing Bootstrap buttons cannot be styled

5. You want to customize Bootstrap so your website's buttons have a unique rounded shape and a custom color. Which approach best avoids the generic Bootstrap look?

hard

A. Use only Bootstrap default classes without changes

B. Add inline styles to each button for color and border-radius

C. Override Bootstrap variables for border-radius and primary color, then rebuild CSS

D. Remove Bootstrap CSS and write all styles from scratch

Solution

1. Step 1: Understand Bootstrap customization options

   Bootstrap allows changing variables like --bs-border-radius and --bs-primary to customize shapes and colors globally.

2. Step 2: Evaluate approaches for uniqueness and maintainability

   Overriding variables and rebuilding CSS keeps Bootstrap features but changes look site-wide, avoiding generic style better than inline styles or removing Bootstrap.

3. Final Answer:

   Override Bootstrap variables for border-radius and primary color, then rebuild CSS -> Option C

4. Quick Check:

   Variable overrides + rebuild = unique Bootstrap look [OK]

Hint: Change Bootstrap variables globally for unique style [OK]

Common Mistakes:

• Using inline styles which are hard to maintain
• Not customizing and keeping default look
• Removing Bootstrap loses useful features