Why utility classes speed development in Bootsrap - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a margin utility class that adds space around the element.

Bootsrap

<div class="[1]">Hello, world!</div>

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

Am-3

Btext-center

Cbtn-primary

Dcontainer

Attempts:

3 left

💡 Hint

Common Mistakes

Using component classes like 'btn-primary' instead of spacing utilities.

Using layout classes like 'container' which do not add margin.

The m-3 class adds margin around the element, which is a utility class for spacing in Bootstrap.

2fill in blank

medium

Complete the code to center text inside a Bootstrap element using a utility class.

Bootsrap

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

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

Atext-left

Btext-right

Ctext-center

Dfont-weight-bold

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'text-left' or 'text-right' which align text to sides.

Using font weight classes which do not affect alignment.

The text-center class centers the text horizontally inside the element.

3fill in blank

hard

Fix the error in the code by choosing the correct utility class to add padding inside the button.

Bootsrap

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

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

Ap-3

Bm-2

Ctext-center

Dborder

Attempts:

3 left

💡 Hint

Common Mistakes

Using margin classes instead of padding.

Using text alignment or border classes which do not add padding.

The p-3 class adds padding inside the button, increasing the space around the text.

4fill in blank

hard

Fill both blanks to create a responsive layout with a container and center the content horizontally.

Bootsrap

<div class="[1] [2]">Content here</div>

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

Acontainer

Btext-center

Cd-flex

Dbtn

Attempts:

3 left

💡 Hint

Common Mistakes

Using button classes instead of layout classes.

Using flex display without centering text.

The container class creates a responsive fixed-width container, and text-center centers the text inside it.

5fill in blank

hard

Fill all three blanks to create a blue button with padding and rounded corners using utility classes.

Bootsrap

<button class="btn [1] [2] [3]">Submit</button>

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

Abtn-primary

Bp-2

Crounded

Dtext-muted

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-muted which makes text gray instead of blue.

Forgetting to add padding or rounded corners.

btn-primary makes the button blue, p-2 adds padding inside, and rounded gives the button rounded corners.