Color utilities (text, background) in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the text color red using Bootstrap utilities.

Bootsrap

<p class="text-[1]">This text is red.</p>

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

Ainfo

Bprimary

Cdanger

Dsuccess

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'text-primary' which is blue, not red.

Using 'text-success' which is green.

The class text-danger applies a red color to the text in Bootstrap.

2fill in blank

medium

Complete the code to set the background color to blue using Bootstrap utilities.

Bootsrap

<div class="bg-[1] p-3">Blue background</div>

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

Aprimary

Bdanger

Cwarning

Dlight

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'bg-danger' which is red.

Using 'bg-warning' which is yellow.

The class bg-primary sets a blue background color in Bootstrap.

3fill in blank

hard

Fix the error in the code to make the text color green using Bootstrap utilities.

Bootsrap

<span class="text-[1]">Green text</span>

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

Ainfo

Bprimary

Cdanger

Dsuccess

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'text-primary' which is blue.

Using 'text-danger' which is red.

The correct class for green text in Bootstrap is text-success.

4fill in blank

hard

Fill both blanks to create a paragraph with yellow background and dark text using Bootstrap utilities.

Bootsrap

<p class="bg-[1] text-[2] p-2">Yellow background with dark text</p>

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

Awarning

Bdark

Clight

Dinfo

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'text-light' which is light text and hard to read on yellow.

Using 'bg-info' which is blue background.

bg-warning gives a yellow background, and text-dark makes the text dark for good contrast.

5fill in blank

hard

Fill all three blanks to create a div with green background, white text, and padding using Bootstrap utilities.

Bootsrap

<div class="bg-[1] text-[2] p-[3]">Green background with white text and padding</div>

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

Asuccess

Bwhite

C3

Ddark

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'text-dark' which is dark text and hard to see on green.

Using 'p-1' or no padding which makes content cramped.

bg-success sets a green background, text-white makes the text white, and p-3 adds padding around the content.