Container types (container, container-fluid) in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the <code>.container</code> class in Bootstrap?

The <code>.container</code> class creates a fixed-width layout that adjusts its width based on the screen size, centering the content with responsive padding.

beginner

How does .container-fluid differ from .container in Bootstrap?

.container-fluid creates a full-width layout that always spans the entire width of the viewport, regardless of screen size.

beginner

Which Bootstrap container type would you use to make your content stretch edge-to-edge on all screen sizes?

Use .container-fluid to make content stretch edge-to-edge on all screen sizes.

intermediate

What happens to the width of a .container when the screen size changes?

The width of a .container changes at predefined breakpoints to keep content centered and readable, with fixed max widths for each screen size.

intermediate

Why might you choose .container over .container-fluid in a web page layout?

Choosing .container helps keep content neatly centered and easier to read on large screens by limiting width, while .container-fluid uses full width which can be overwhelming.

Which Bootstrap class creates a fixed-width container that adapts at breakpoints?

A .container-fixed

B .container-fluid

C .container

D .container-responsive

.container creates a fixed-width container that changes width at breakpoints.

What does .container-fluid do in Bootstrap?

A Creates a full-width container spanning the viewport

B Creates a container with fixed height

C Creates a fixed-width container

D Creates a container with padding only

.container-fluid always spans the full width of the viewport.

If you want your content to be centered and not stretch too wide on large screens, which container should you use?

A .container

B .container-fluid

C .container-wide

D .container-center

.container centers content with max widths to keep it readable.

Which container type is best for a dashboard that needs to use all available screen width?

A .container-responsive

B .container

C .container-fixed

D .container-fluid

Dashboards often use .container-fluid to use full screen width.

What happens to .container width on small screens?

A It stays fixed at large width

B It shrinks to fit smaller screens

C It becomes full width

D It disappears

.container shrinks at breakpoints to fit smaller screens.

Explain the difference between .container and .container-fluid in Bootstrap and when you might use each.

Think about how content width changes and why that matters for design.

Describe how Bootstrap containers help with responsive web design.

Consider how containers behave on phones vs desktops.