Why consistent typography matters in Bootsrap - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a Bootstrap heading style.

Bootsrap

<h1 class="[1]">Welcome to My Website</h1>

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

Atext-center

Bcontainer

Cbtn-primary

Ddisplay-1

Attempts:

3 left

💡 Hint

Common Mistakes

Using layout classes like 'container' instead of typography classes.

Using button classes like 'btn-primary' on headings.

The display-1 class in Bootstrap styles the heading with a large, consistent font size.

2fill in blank

medium

Complete the code to make paragraph text use Bootstrap's lead style for emphasis.

Bootsrap

<p class="[1]">This is an important introduction paragraph.</p>

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

Atext-muted

Bsmall

Clead

Dfont-weight-bold

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'text-muted' which makes text less visible.

Using 'small' which reduces font size.

The lead class makes paragraph text larger and lighter, helping it stand out as an introduction.

3fill in blank

hard

Fix the error in the code to correctly apply a Bootstrap text color class.

Bootsrap

<p class="text-[1]">This text is highlighted in blue.</p>

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

Aprimary

Bblue

Cinfoo

Dprimaryy

Attempts:

3 left

💡 Hint

Common Mistakes

Adding extra letters like 'primaryy' or 'infoo'.

Using color names not defined by Bootstrap like 'blue'.

The correct Bootstrap class for blue text is text-primary. Misspellings cause the style not to apply.

4fill in blank

hard

Fill both blanks to create a Bootstrap card with a title and text.

Bootsrap

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-[1]">Card Title</h5>
    <p class="card-[2]">Some quick example text to build on the card title.</p>
  </div>
</div>

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

Atitle

Btext

Cheader

Dbody

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'card-header' or 'card-body' on text elements instead of container divs.

Mixing up 'title' and 'text' classes.

The class card-title styles the heading, and card-text styles the paragraph inside a Bootstrap card.

5fill in blank

hard

Fill all three blanks to create a Bootstrap button with small size, primary color, and rounded corners.

Bootsrap

<button type="button" class="btn [1] [2] [3]">Click Me</button>

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

Abtn-sm

Bbtn-primary

Crounded-pill

Dbtn-danger

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'btn-danger' which makes the button red.

Mixing size classes incorrectly.

The class btn-primary gives the button a blue color, rounded-pill makes corners fully rounded, and btn-sm sets a smaller size. To make it large, replace btn-sm with btn-lg, but here the correct answer is to identify the classes given.