Container types (container, container-fluid) in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a fixed-width Bootstrap container.

Bootsrap

<div class="[1]">
  <p>This is a fixed-width container.</p>
</div>

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

Acontainer

Bcontainer-fluid

Ccontainer-fixed

Dcontainer-wide

Attempts:

3 left

💡 Hint

Common Mistakes

Using "container-fluid" instead of "container" for fixed width.

Using non-existent classes like "container-fixed".

The class "container" creates a fixed-width container that adapts to the screen size but has maximum widths at different breakpoints.

2fill in blank

medium

Complete the code to create a full-width Bootstrap container that spans the entire viewport width.

Bootsrap

<div class="[1]">
  <p>This container spans the full width of the viewport.</p>
</div>

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

Acontainer

Bcontainer-full

Ccontainer-fluid

Dcontainer-wide

Attempts:

3 left

💡 Hint

Common Mistakes

Using "container" which limits the width.

Using non-existent classes like "container-full".

The class "container-fluid" creates a container that always spans the full width of the viewport.

3fill in blank

hard

Fix the error in the code to make the container full width.

Bootsrap

<div class="container[1]">
  <p>This container should be full width.</p>
</div>

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

A-fixed

B-full

C-wide

D-fluid

Attempts:

3 left

💡 Hint

Common Mistakes

Adding incorrect suffixes like "-full" or "-wide".

Leaving the class as just "container".

Appending "-fluid" to "container" makes it "container-fluid", which is the correct class for full width containers.

4fill in blank

hard

Fill both blanks to create a fixed-width container with a background color and padding.

Bootsrap

<div class="[1] bg-primary p-3 text-white">
  <p>This container has a blue background and padding.</p>
</div>

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

Acontainer

Bcontainer-fluid

Ccontainer-fixed

Dcontainer-wide

Attempts:

3 left

💡 Hint

Common Mistakes

Using "container-fluid" which makes it full width.

Using non-existent classes like "container-fixed".

The class "container" creates a fixed-width container. The other classes add background color, padding, and text color.

5fill in blank

hard

Fill all three blanks to create a full-width container with a light background and centered text.

Bootsrap

<div class="[1] bg-light text-center p-4">
  <h1 class="[2]">Welcome</h1>
  <p class="[3]">This container spans the full width.</p>
</div>

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

Acontainer

Bdisplay-4

Clead

Dcontainer-fluid

Attempts:

3 left

💡 Hint

Common Mistakes

Using "container" instead of "container-fluid" for full width.

Not using proper Bootstrap text classes.

Use "container-fluid" for full width container, "display-4" for large heading style, and "lead" for emphasized paragraph text.