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.

Practice

1. Which Bootstrap class adds a border to all sides of an element?

easy

A. border

B. border-top

C. border-none

D. border-left

Solution

1. Step 1: Understand the border utility classes

   Bootstrap's border class adds a border on all four sides of an element.

2. Step 2: Compare with side-specific classes

   Classes like border-top or border-left add borders only on one side, not all sides.

3. Final Answer:

   border -> Option A

4. Quick Check:

   All sides border = border [OK]

Hint: Use border for all sides border fast [OK]

Common Mistakes:

• Confusing border-top as all sides border
• Using border-none to add border
• Thinking border-left adds all borders

2. Which class correctly removes the border from an element in Bootstrap?

easy

A. border-remove

B. no-border

C. border-0

D. border-none

Solution

1. Step 1: Identify the Bootstrap class for removing borders

   Bootstrap uses border-0 to remove all borders from an element.

2. Step 2: Check other options for validity

   Classes like border-remove, no-border, and border-none are not valid Bootstrap classes.

3. Final Answer:

   border-0 -> Option C

4. Quick Check:

   Remove border = border-0 [OK]

Hint: Use border-0 to remove borders quickly [OK]

Common Mistakes:

• Using non-existent classes like border-none
• Assuming border-remove works
• Confusing border-0 with adding borders

3. What will be the visible border effect of this HTML snippet?

<div class="border-top border-danger p-3">Hello</div>

medium

A. A red border on the bottom side only

B. A red border on all sides

C. No border visible

D. A red border on the top side only

Solution

1. Step 1: Analyze the classes used

   The class border-top adds a border only on the top side. The class border-danger colors the border red.

2. Step 2: Understand the combined effect

   Only the top border will be visible and it will be red. Other sides have no border.

3. Final Answer:

   A red border on the top side only -> Option D

4. Quick Check:

   border-top + border-danger = red top border [OK]

Hint: Combine side + color classes for specific colored borders [OK]

Common Mistakes:

• Thinking border-danger adds border on all sides
• Assuming border-top adds border on all sides
• Ignoring the color class effect

4. You want to add a border only on the left side of a button, but your code uses border-left-3. Why does the border not appear?

medium

A. Because border-left-3 is not a valid Bootstrap class

B. Because the button has no padding

C. Because border-left needs a color class to show

D. Because borders only work on divs, not buttons

Solution

1. Step 1: Check Bootstrap border width classes

   Bootstrap uses border for border presence and border-1, border-2, etc. for width, but not combined with side like border-left-3.

2. Step 2: Understand correct usage

   To add a left border with width, use border-start plus border-3 or just border-start with color. border-left-3 is invalid.

3. Final Answer:

   border-left-3 is not a valid Bootstrap class -> Option A

4. Quick Check:

   Invalid class name = no border shown [OK]

Hint: Use valid Bootstrap classes; no combined side-width classes [OK]

Common Mistakes:

• Using invalid combined classes like border-left-3
• Assuming buttons can't have borders
• Forgetting to add color class for visibility

5. You want to create a card with a thick blue border only on the bottom side using Bootstrap. Which combination of classes achieves this?

hard

A. border border-4 border-primary

B. border-bottom border-4 border-primary

C. border-bottom-4 border-primary

D. border-bottom border-primary border-4

Solution

1. Step 1: Identify classes for border side and width

   border-bottom adds border only on the bottom side. border-4 sets border thickness to 4 (thick).

2. Step 2: Add color class

   border-primary colors the border blue (Bootstrap primary color).

3. Step 3: Check class order and validity

   Order does not affect Bootstrap border utilities, so border-bottom border-4 border-primary is correct. border-bottom-4 is invalid.

4. Final Answer:

   border-bottom border-4 border-primary -> Option B

5. Quick Check:

   Bottom thick blue border = border-bottom border-4 border-primary [OK]

Hint: Combine side + width + color classes for custom borders [OK]

Common Mistakes:

• Using invalid class border-bottom-4
• Adding border on all sides instead of bottom only
• Forgetting to add border width class