Training Trains Internship
Student login
← Tailwind CSS & Bootstrap learning path
Tailwind CSS & Bootstrap · Module 2 of 10

Bootstrap grid and layout

Build responsive layouts with containers, rows and columns.

📖 Key ideas

  1. .container wraps content; .row holds columns.
  2. The grid has 12 columns: .col-6 is half width.
  3. Breakpoints: sm, md, lg, xl, xxl, e.g. .col-md-4.
  4. Gutters control spacing: .g-3.
  5. Utilities: .d-flex, .justify-content-between, .mt-3.
💡 Real-life example: The 12-column grid is a chocolate bar with 12 pieces: split it as 6+6, 4+4+4 or 3+9.
.containerCentred, padded wrapper
.rowHorizontal group of columns
.col-md-4One third width from md up
BreakpointScreen width where layout changes