Video summary

Bootstrap 5 Grid System Tutorial

Main summary

Key takeaways

Technology

What the video covers

  • Bootstrap 5 grid system tutorial aimed at both beginners and people coming from Bootstrap 4.
  • Compares what changed in grid behavior/features from Bootstrap 4 → Bootstrap 5.
  • Builds a small project from scratch (manual index.html) and then focuses on grid concepts.

Installation / setup (guide steps)

  • Shows downloading Bootstrap 5 alpha from a linked page (since official docs may not yet be live at the time).
  • Unzips and renames the folder to bootstrap5.
  • Creates an index.html file in Visual Studio Code using Emmet (!).
  • Links Bootstrap CSS manually:
    • Adds a stylesheet link like bootstrap.css in the <head>.
  • Includes JS dependencies from CDN:
    • Notes jQuery is no longer a dependency.
    • Uses Popper 2 (required for Bootstrap 5).
    • Adds bootstrap.js script from the local folder (or project JS folder).

Outcome:

  • Confirms the page renders with Bootstrap’s default typography and no errors.

Core concept: Bootstrap Grid system

The grid system is described as a way to create responsive layouts that change based on screen size.

Key components:

  • Container
  • Row
  • Column(s)

Purpose:

  • Create different layouts for different devices (desktop vs mobile) using breakpoints.

Breakpoints (responsive behavior)

  • Explains that layouts switch when the screen reaches predefined breakpoints.
  • Breakpoint categories are referenced from extra small (xs) up to extra extra large (xxl) (with example mentions like “medium screen size”).
  • Demonstrates how columns rearrange as the viewport shrinks.

Column sizing model (12-column grid)

  • Each row contains columns sized from 1 to 12.
  • Total columns within a row must not exceed 12.
  • Examples shown:
    • 12 = full width
    • Split layouts like 6+6, 4+4+4, 3+3+3+3
  • Responsive behavior:
    • Applies different column spans per breakpoint
    • The same column can use different sizes depending on screen width.

Grid examples shown (tutorial walkthrough)

  1. Main content + sidebar

    • On large screens: two columns side-by-side.
    • On smaller screens: stacked vertically after a breakpoint.

  2. Header + articles + footer

    • Becomes a single-column vertical layout as the viewport shrinks.

Bootstrap 4 → Bootstrap 5 grid changes (highlighted)

  • New breakpoint introduced: xxl (extra extra large).
  • Gutters change: Bootstrap 5 replaces the older gutter approach with g- gutter utilities via classes (the subtitle references a “gutter class replaced…” idea; conceptually it’s the Bootstrap 5 gutter class system).
  • Other minor grid-related changes are referenced, but the most emphasized are:
    • the gutter system
    • the xxl breakpoint

Containers changes (responsive container widths)

  • Explains container vs container-fluid.
  • Introduces responsive containers using breakpoints, e.g.:
    • container-md: full-width until the medium breakpoint, then switches to a constrained container width.

Row/column usage and sizing rules

  • Shows that if you omit explicit column sizing, Bootstrap can auto-calculate based on the number of columns.
  • Also demonstrates mixing explicit sizes (e.g., one row with different column definitions, another row with different counts).

Gutters (spacing) tutorial (feature demo)

Demonstrates changing spacing using gutter utilities:

  • Horizontal gutters (gx-*): spacing between columns in the same row.
  • Vertical gutters (gy-*): spacing between rows.

Example:

  • Adjusting gx from a higher value (like 5) down to 1 changes the visible gap between elements.
  • Also mentions adjusting vertical spacing between stacked row elements.

Main speakers / sources

  • David from MD Bootstrap ("hey guys it's David from MD bootstrap comm").

Original video