Auto-sizing columns in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Bootstrap auto-sizing column.

Bootsrap

<div class="container">
  <div class="row">
    <div class="col-[1]">
      Auto-sized column
    </div>
  </div>
</div>

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

Afluid

B12

C6

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-12 which makes the column full width.

Using col-fluid which is not a valid Bootstrap class.

The col-auto class makes the column width adjust to its content automatically.

2fill in blank

medium

Complete the code to create two columns where the first is auto-sized and the second fills the remaining space.

Bootsrap

<div class="container">
  <div class="row">
    <div class="col-[1]">
      Auto-sized
    </div>
    <div class="col">
      Fills remaining space
    </div>
  </div>
</div>

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

A12

Bfluid

Cauto

D6

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-6 which fixes the width to half the row.

Using col-12 which makes the column full width.

The col-auto class makes the first column only as wide as its content, while the second column fills the rest.

3fill in blank

hard

Fix the error in the code to properly auto-size the column.

Bootsrap

<div class="container">
  <div class="row">
    <div class="[1]">
      Auto-sized column
    </div>
  </div>
</div>

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

Acol-12

Bcol-auto

Ccol-fluid

Dcol

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-fluid which is not recognized by Bootstrap.

Using col-12 which makes the column full width.

The class col-auto correctly auto-sizes the column. col-fluid is not a valid Bootstrap class.

4fill in blank

hard

Fill both blanks to create a row with an auto-sized column and a fixed 8-column wide column.

Bootsrap

<div class="container">
  <div class="row">
    <div class="col-[1]">
      Auto-sized
    </div>
    <div class="col-[2]">
      Fixed width
    </div>
  </div>
</div>

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

Aauto

B6

C8

D12

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-12 for the fixed width column which takes full width.

Using col-6 instead of col-8 for fixed width.

The first column uses col-auto to size based on content, and the second uses col-8 for fixed width.

5fill in blank

hard

Fill both blanks to create a row with an auto-sized column, a fixed 4-column wide column, and a column that fills remaining space.

Bootsrap

<div class="container">
  <div class="row">
    <div class="col-[1]">
      Auto-sized
    </div>
    <div class="col-[2]">
      Fixed width
    </div>
    <div class="col">
      Fills remaining
    </div>
  </div>
</div>

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

Aauto

B4

D12

Attempts:

3 left

💡 Hint

Common Mistakes

Putting a number in the last blank which should be empty for flexible width.

Using col-12 for fixed width which takes full row width.

The first column uses col-auto for auto-sizing, the second uses col-4 for fixed width, and the third uses col (empty) to fill remaining space.