Horizontal collapse in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a button that toggles a horizontal collapse.

Bootsrap

<button class="btn btn-primary" type="button" data-bs-toggle="[1]" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Toggle Width Collapse
</button>

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

Acollapse

Bdropdown

Cmodal

Dtooltip

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'modal' or 'dropdown' instead of 'collapse' causes the toggle not to work.

Leaving the attribute empty means no toggle behavior.

The data-bs-toggle="collapse" attribute tells Bootstrap to toggle the collapse behavior on the target element.

2fill in blank

medium

Complete the code to make the collapsible content expand horizontally.

Bootsrap

<div class="collapse [1]" id="collapseExample">
  <div class="card card-body">
    This content collapses horizontally.
  </div>
</div>

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

Acollapse-vertical

Bshow

Ccollapse-horizontal

Dfade

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'show' only makes the content visible but does not change collapse direction.

Using 'fade' adds animation but not horizontal collapse.

The class collapse-horizontal makes the collapse expand and collapse horizontally instead of vertically.

3fill in blank

hard

Fix the error in the button code to properly toggle horizontal collapse.

Bootsrap

<button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#[1]" aria-expanded="false" aria-controls="collapseWidthExample">
  Toggle Width Collapse
</button>

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

AcollapseWidthExample

BcollapseWidth

Attempts:

3 left

💡 Hint

Common Mistakes

Misspelling the ID in the data-bs-target attribute.

Omitting the '#' in the data-bs-target value.

The data-bs-target must exactly match the ID of the collapsible element, which is collapseWidthExample.

4fill in blank

hard

Fill both blanks to create a horizontal collapse with a button that toggles it.

Bootsrap

<button class="btn btn-info" type="button" data-bs-toggle="[1]" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
  Toggle Width Collapse
</button>
<div class="collapse [2]" id="collapseWidthExample">
  <div class="card card-body" style="width: 300px;">
    This is some placeholder content for a horizontal collapse.
  </div>
</div>

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

Acollapse

Bmodal

Ccollapse-horizontal

Dfade

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'modal' or 'fade' instead of 'collapse' for toggle.

Forgetting to add 'collapse-horizontal' class to the collapsible div.

The button must toggle collapse, and the collapsible div must have the collapse-horizontal class to collapse horizontally.

5fill in blank

hard

Fill all three blanks to create a horizontal collapse with a button and set the width style.

Bootsrap

<button class="btn btn-warning" type="button" data-bs-toggle="[1]" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
  Toggle Width Collapse
</button>
<div class="collapse [2]" id="collapseWidthExample">
  <div class="card card-body" style="width: [3];">
    This is some placeholder content for a horizontal collapse.
  </div>
</div>

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

Acollapse

Bcollapse-horizontal

C300px

Dfade

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fade' instead of 'collapse' for toggle.

Not setting the width style, so horizontal collapse is not visible.

Forgetting the 'collapse-horizontal' class.

The button toggles collapse, the div uses collapse-horizontal for horizontal effect, and the width is set to 300px for visible horizontal size.