Jump directly to main navigation Jump directly to content

Grids

The Three Layout CTypes t3bs_container, t3bs_fluidrow and t3bs_column map to the Bootstrap 5 grid in TYPO3. This page shows all variants and options using clearly marked demo areas.

Containers are outlined in blue, rows in red, and columns in green—the highlighting appears only when t3bs-demo-outline is set as an additional CSS class.

Contents of this page

  1. Container Types
  2. Row Options
  3. Columns & Breakpoints
  4. Offset & Order
  5. Nesting

Container Types

Bootstrap offers six container variants. container It is responsive, with a maximum width for each breakpoint (540 / 720 / 960 / 1140 / 1320 px). The variants container-sm up to container-xl are 100% wide below their breakpoint and, starting at the breakpoint, are identical to .container. container-fluid is always 100%.

The differences are only visible in smaller viewports—narrow the browser window to see the effect.

container

Standard responsive: Max width adjusts according to each breakpoint (540 / 720 / 960 / 1140 / 1320 px). Behavior for each viewport width.

container-sm

Below sm (576 px) 100% wide, from sm identical to .container. Results in edge-to-edge on mobile.

container-md

Below md (768 px) 100% wide, from md identical to .container.

container-lg

Below lg (992 px) 100% wide, from lg identical to .container.

container-xl

Below xl (1200 px) 100% wide, from xl identical to .container.

container-fluid

Always 100% of the viewport width, without a max-width cap.

Row Options

t3bs_fluidrow offers three configurations: vertical alignment (align-items-*), horizontal distribution (justify-content-*) and display mode (flex vs. block).

Demo 1 — justify-content: between

A

B

C

Demo 2 — align-items: center

Columns of different heights are vertically centered.

In short

Three lines of text fill this column vertically to a significantly greater extent than the adjacent columns. This makes the effect of align-items-center becomes apparent.

Medium-long

Columns & Breakpoints

Each column has its own width per breakpoint (tx_t3bs_col_xs up to tx_t3bs_col_xxl). Values range from 1 to 12. If a value is left blank, the last defined value applies. Change the browser width to see how it behaves.

Column 1

xs:12 · sm:6 · md:4 · lg:3

Column 2

xs:12 · sm:6 · md:4 · lg:3

Column 3

xs:12 · sm:6 · md:4 · lg:3

Column 4

xs:12 · sm:6 · md:4 · lg:3

Layout: under sm 1 column (full width) · sm 2 columns · md 3 columns · lg 4 columns.

Offset & Order

Columns can be offset (offset-md-*) and visually reordered (order-*) without changing the HTML order. Both are set via the Additional CSS Class field in the Column settings.

md=4 + offset-md-2
starts at column 3

md=4
immediately following

Nesting

An additional row can be placed within a column. This is useful for sublayouts and prevents the number of columns from ballooning to 12.

Outer Column (md=8)

Inner Column (md=6)

Inner Column (md=6)

Outer Column (md=4)