Bootstrap's grid system is the part of the framework you will use most often. It gives you a predictable way to divide a page into rows and columns so that content rearranges itself as the browser window — or the device — gets narrower or wider. The grid is built on a 12-column model: inside a row, you assign each column a number of the 12 available units, and Bootstrap handles the widths, the spacing, and the wrapping for you.
Two ideas make the grid work. The first is mobile-first design: classes without a breakpoint apply at every size, and breakpoint classes such as col-sm, col-md, col-lg, and col-xl only take effect from that screen width upward. The second is structure: a container wraps your layout, rows live inside containers, and columns live inside rows. Getting that nesting right is what prevents the strange gutters and overflow problems beginners run into.
As you watch these videos, pay attention to three things. Watch how the presenter resizes the browser to demonstrate a breakpoint taking effect — that is the fastest way to build intuition about tiers. Note the difference between a fixed-width container and container-fluid. And notice how column classes stack: giving one element both col-12 and col-md-6 means full width on phones and half width from medium screens up. Also look for offset and order utilities, and for examples where a row is placed inside a column to create nested grids.
A focused lesson from a Bootstrap 5 crash course series that walks through the grid layout from the ground up. Based on its title and length, it should cover the container-row-column structure, how the 12 columns are divided among elements, and how breakpoint-specific column classes change the layout at different screen widths. Expect live coding and browser resizing to demonstrate the results.
At roughly seventeen minutes it is the longest and most complete treatment of the grid here, and being part of a structured Bootstrap 5 series it introduces the concepts in a sensible order rather than as isolated tips.
A short, targeted video on the container class and breakpoints in Bootstrap 5. It should explain what a container does as the outermost layout wrapper, how fixed containers differ from responsive and fluid variants, and what the breakpoint tiers (sm, md, lg, xl, xxl) correspond to in pixel widths.
It directly addresses two subtopics — containers as the foundation of layout, and breakpoint classes and screen size tiers — in under five minutes, making it an efficient reference to rewatch when you are unsure which container or tier to use.
This video concentrates on building a responsive grid using row and col classes across the sm, md, and lg screen sizes. It should show how assigning different column widths at different tiers causes content to reflow, and demonstrate the resulting behavior as the viewport changes.
It reinforces the mobile-first idea by example, showing the same markup behaving differently at each tier, which is the single concept students most often need to see more than once.
These three videos together support MO3 by covering the mechanics of Bootstrap's 12-column grid and breakpoint classes needed to build responsive, mobile-first layouts. The crash-course lesson supplies the overall container-row-column structure, the container-and-breakpoints video clarifies the wrapper and the screen-size tiers, and the row-and-col video demonstrates how the same markup adapts across sm, md, and lg widths. Note that this topic covers layout only — navbars, modals, and cards, along with the CDN loading practices in MO1, are addressed elsewhere in the module, and you should be able to apply the grid inside a page that already has Bootstrap's CSS linked correctly.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.