Skip to content
Learn Netverks

Lesson

Step 11/36 31% through track

layout-patterns

Common layout patterns

Last reviewed May 28, 2026 Content v20260528
Track mode
iframe_html
Means
HTML preview sandbox
Reading
~1 min
Level
intermediate

This lesson

This lesson teaches Common layout patterns—the ideas, syntax, and habits you need before moving on in Bootstrap.

Bootstrap patterns appear constantly in legacy apps and rapid admin UI work.

You will apply Common layout patterns in contexts like: Internal tools, WordPress themes, Laravel apps, and teams that want opinionated UI without writing every rule from scratch.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When the previous lesson's MCQs feel easy and you can explain Common layout patterns in your own words.

Production UIs reuse a handful of layouts. Bootstrap composes them from grid + flex + spacing utilities without a new stylesheet each time.

Patterns to recognize

  • Holy grail shell — header/footer full width, container main, sidebar col-lg-3 + content col-lg-9
  • Card deck — row row-cols-1 row-cols-md-3 g-4 with h-100 cards
  • Sticky footer — min-vh-100 d-flex flex-column on body wrapper, mt-auto on footer
  • Split hero — two col-md-6 columns with align-items-center on the row

Important interview questions and answers

  1. Q: How do you equalize card heights in a row?
    A: Use h-100 on cards inside a row with equal-height columns, or flex column layout inside each card.
  2. Q: Grid vs flex for a dashboard sidebar?
    A: Grid columns for the shell; flex inside the sidebar for stacked nav links.

Self-check

  1. Write the row classes for three equal cards on md+ and one column on mobile.
  2. Which utility pushes a footer to the bottom in a sticky-footer layout?

Interview tip Lesson completion confidence

Can you explain this lesson in 30 seconds without reading notes?

Not saved yet.

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Check yourself

Multiple choice — immediate feedback.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

  • Which pattern maps to your last project?
  • What would you simplify?

Sign up or log in to post comments and sync lesson progress across devices.

No discussion yet. Be the first to ask a question.

Jump

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36