[Python] Polotly Dash: Columns are not in a row but are stacked in several rows

With the code below, which I copied from "https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/" (with minor changes):

import dash_bootstrap_components as dbc
from dash import *

app = Dash()

row = html.Div(
[
dbc.Row(
[
dbc.Col(html.Div("One of three columns 1")),
dbc.Col(html.Div("One of three columns 2")),
dbc.Col(html.Div("One of three columns 3")),
],
align="start",
),
dbc.Row(
[
dbc.Col(html.Div("One of three columns 4")),
dbc.Col(html.Div("One of three columns 5")),
dbc.Col(html.Div("One of three columns 6")),
],
align="center",
),
dbc.Row(
[
dbc.Col(html.Div("One of three columns 7")),
dbc.Col(html.Div("One of three columns 9")),
dbc.Col(html.Div("One of three columns 9")),
],
align="end",
),
dbc.Row(
[
dbc.Col(html.Div("One of three columns 10"), align="start"),
dbc.Col(html.Div("One of three columns 11"), align="center"),
dbc.Col(html.Div("One of three columns 13"), align="end"),
]
),
],
className="pad-row",
)

app.layout = dbc.Container(fluid=True, children=[row])

app.run(debug=True, host = "127.0.0.1", port=8051)


I would expect to get four rows with three columns each, but I get:

One of three columns 1
One of three columns 2
One of three columns 3
One of three columns 4
One of three columns 5
One of three columns 6
One of three columns 7
One of three columns 8
One of three columns 9
One of three columns 10
One of three columns 11
One of three columns 12


What is wrong with the code? I would be very appreciative for any help.

I'm using Kubuntu 24.04, Python 3.12.8, dash 3.0.1, dash-bootstrap-components 2.0.0

Continue reading...