Page structure

Four components build the layout of a page, one inside the other:

ComponentWhat it does
SectionA band of the page. It can have a background that goes from edge to edge
ContainerLimits the width and centers the content
RowA flex row
ColA column of the row, sized in twelfths

General

Section, Container, Row and Col, with a Display and Cards as the content.

Rules that keep it working

  • • Put the Container inside the Section, not the other way. The band goes from edge to edge and the content stays narrow.
  • • The spans in a Row should add up to 12 or less. A Row does not wrap, so more than 12 makes the columns narrower.
  • • Use a new Row for each line. If you need items that wrap to the next line by themselves, use Grid.
  • • Col needs a Row around it. The space set by gap on the Row is what the columns use.