Border utilities in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a border to the div using Bootstrap.

Bootsrap

<div class="[1]">This div has a border.</div>

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

Aborder-0

Bno-border

Cborder

Dborderless

Attempts:

3 left

💡 Hint

Common Mistakes

Using classes like 'border-0' which removes borders.

Using non-existent classes like 'no-border' or 'borderless'.

The border class in Bootstrap adds a border around the element.

2fill in blank

medium

Complete the code to add a top border only using Bootstrap.

Bootsrap

<div class="[1]">This div has a top border.</div>

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

Aborder-top

Bborder-right

Cborder-left

Dborder-bottom

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'border-bottom' or other sides instead of 'border-top'.

The border-top class adds a border only at the top of the element.

3fill in blank

hard

Fix the error in the code to remove all borders from the button using Bootstrap.

Bootsrap

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

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

Aborder

Bborder-0

Cno-border

Dborder-none

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'border' which adds a border instead of removing it.

Using invalid classes that do not exist in Bootstrap.

The border-0 class removes all borders from an element in Bootstrap.

4fill in blank

hard

Fill both blanks to add a left border and make it thicker using Bootstrap.

Bootsrap

<div class="[1] [2]">Thick left border</div>

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

Aborder-start

Bborder-top

Cborder-3

Dborder-1

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'border-top' instead of 'border-start'.

Using 'border-1' which is thinner than 'border-3'.

border-start adds a border on the left side, and border-3 makes the border thicker.

5fill in blank

hard

Fill all three blanks to add a red border on the bottom with medium thickness using Bootstrap.

Bootsrap

<div class="[1] [2] [3]">Red bottom border</div>

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

Aborder-bottom

Bborder-danger

Cborder-2

Dborder-primary

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'border-primary' which is blue instead of red.

Using 'border-3' which is thicker than medium thickness.

border-bottom adds a border at the bottom, border-danger colors it red, and border-2 sets medium thickness.