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.

Practice

1. What is the main difference between .container and .container-fluid in Bootstrap?

easy

A. Both have fixed widths but different background colors.

B. .container is full width; .container-fluid has fixed max widths.

C. .container has fixed max widths; .container-fluid is full width.

D. Both are full width but .container-fluid has padding.

Solution

1. Step 1: Understand .container behavior

   .container centers content and limits width based on screen size.

2. Step 2: Understand .container-fluid behavior

   .container-fluid stretches content to fill the entire screen width.

3. Final Answer:

   .container has fixed max widths; .container-fluid is full width. -> Option C

4. Quick Check:

   Fixed width vs full width = A [OK]

Hint: Fixed width container centers; fluid fills screen width [OK]

Common Mistakes:

• Confusing which container is fixed or fluid
• Thinking both containers behave the same
• Assuming container-fluid has fixed width

2. Which of the following is the correct way to create a full-width container in Bootstrap?

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify Bootstrap class for full width

   The class container-fluid is used for full width containers.

2. Step 2: Check other options for correctness

   container is fixed width; container-full and fluid-container are not valid Bootstrap classes.

3. Final Answer:

   <div class="container-fluid"></div> -> Option A

4. Quick Check:

   Full width container = container-fluid [OK]

Hint: Use exactly 'container-fluid' for full width [OK]

Common Mistakes:

• Using 'container' instead of 'container-fluid'
• Inventing non-existent class names
• Mixing up class names order

3. Given this HTML snippet:

<div class="container">
  <p>Hello</p>
</div>

What will happen when you resize the browser window from wide to narrow?

medium

A. The container disappears on small screens.

B. The container width stays fixed and content scrolls horizontally.

C. The container fills the entire screen width at all times.

D. The container width adjusts to screen size but stays centered.

Solution

1. Step 1: Understand .container responsive behavior

   .container changes max width at breakpoints but remains centered.

2. Step 2: Analyze resizing effect

   As screen narrows, container width shrinks but content stays centered, no horizontal scroll.

3. Final Answer:

   The container width adjusts to screen size but stays centered. -> Option D

4. Quick Check:

   Container adjusts width responsively but stays centered = A [OK]

Hint: Container adapts width but stays centered [OK]

Common Mistakes:

• Thinking container is always full width
• Assuming container causes horizontal scroll
• Believing container disappears on small screens

4. You want your page content to always fill the entire width of the browser window, but your code uses <div class="container">. What is the problem and how do you fix it?

medium

A. Problem: container is fixed width; Fix: change to container-fluid.

B. Problem: container is full width; Fix: add padding to container.

C. Problem: container is missing; Fix: add container class.

D. Problem: container is deprecated; Fix: use container-full.

Solution

1. Step 1: Identify why content is not full width

   container limits width and centers content, so it won't fill full width.

2. Step 2: Choose correct container class for full width

   Use container-fluid to make content fill entire browser width.

3. Final Answer:

   Problem: container is fixed width; Fix: change to container-fluid. -> Option A

4. Quick Check:

   Fixed width container needs fluid for full width [OK]

Hint: Switch from 'container' to 'container-fluid' for full width [OK]

Common Mistakes:

• Trying to add padding instead of changing container type
• Using non-existent classes like 'container-full'
• Not realizing container centers and limits width

5. You want a layout where the header uses .container-fluid to span full width, but the main content uses .container to stay centered and limited in width. Which HTML structure correctly applies this?

hard

A. <div class="container">
<header>Header</header>
<main>Content</main>
</div>

B. <header class="container-fluid">Header</header>
<main class="container">Content</main>

C. <header class="container">Header</header>
<main class="container-fluid">Content</main>

D. <div class="container-fluid">
<header>Header</header>
<main>Content</main>
</div>

Solution

1. Step 1: Assign full width to header

   Use container-fluid on header to make it span entire width.

2. Step 2: Assign fixed width and centered content to main

   Use container on main to keep content centered and limited in width.

3. Step 3: Verify structure matches requirements

   <header class="container-fluid">Header</header>
   <main class="container">Content</main>

   correctly applies these classes separately to header and main.

4. Final Answer:

   Header with container-fluid and main with container. -> Option B

5. Quick Check:

   Header container-fluid + main container = C [OK]

Hint: Use container-fluid for full width, container for centered content [OK]

Common Mistakes:

• Using container on header instead of container-fluid
• Wrapping both in same container type
• Not separating container classes by section