Application layouts

Classic sidebar and main panel

container(
  columns(
    column(
      width = 4,
      p("Sidebar panel")
    ),
    column(
      width = 8,
      p("Main panel")
    )
  )
)

Sidebar panel

Main panel

Three column layout

container(
  columns(
    column(
      p("Column 1")
    ),
    column(
      p("Column 2")
    ),
    column(
      p("Column 3")
    )
  )
)

Column 1

Column 2

Column 3

Main panel with columns below

The three panels below the main panel render in a column on small screens. Swap in md or lg for sm to switch to a column layout on larger screens.

container(
  columns(
    column(
      width = 12,
      p("Main panel")
    ),
    column(
      width = c(xs = 12, sm = 4),
      p("Column 1")
    ),
    column(
      width = c(xs = 12, sm = 4),
      p("Column 2")
    ),
    column(
      width = c(xs = 12, sm = 4),
      p("Column 3")
    )
  )
)

Main panel

Column 1

Column 2

Column 3

Further reading

Use display() with type = "flex" and flex() to use flex box layout. See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox for more information on flex box layout.