rsc_cols: Arrange HTML elements or widgets in Bootstrap columns

In rstudio/rscpages: Organize and Curate Your Content Within 'Posit Connect'

Arrange HTML elements or widgets in Bootstrap columns

Description

This helper function makes it easy to put HTML elements side by side. It can be called directly from the console but is especially designed to work in an R Markdown document. Note that this is ripped directly from https://github.com/rstudio/crosstalk without the additional bootstrap dependency (since it is already expected in connectwidgets)

Usage

rsc_cols(..., widths = NA, device = c("xs", "sm", "md", "lg"))

Arguments

...	htmltools tag objects, lists, text, HTML widgets, or NULL. These arguments should be unnamed.
widths	The number of columns that should be assigned to each of the ... elements (the total number of columns available is always 12). The width vector will be recycled if there are more ... arguments. NA columns will evenly split the remaining columns that are left after the widths are recycled and non-NA values are subtracted.
device	The class of device which is targeted by these widths; with smaller screen sizes the layout will collapse to a one-column, top-to-bottom display instead. xs: never collapse, sm: collapse below 768px, md: 992px, lg: 1200px.

Value

A browsable HTML element.

Examples

library(htmltools)

# If width is unspecified, equal widths will be used
rsc_cols(
  div(style = css(width="100%", height="400px", background_color="red")),
  div(style = css(width="100%", height="400px", background_color="blue"))
)

# Use NA to absorb remaining width
rsc_cols(widths = c(2, NA, NA),
  div(style = css(width="100%", height="400px", background_color="red")),
  div(style = css(width="100%", height="400px", background_color="blue")),
  div(style = css(width="100%", height="400px", background_color="green"))
)

# Recycling widths
rsc_cols(widths = c(2, 4),
  div(style = css(width="100%", height="400px", background_color="red")),
  div(style = css(width="100%", height="400px", background_color="blue")),
  div(style = css(width="100%", height="400px", background_color="red")),
  div(style = css(width="100%", height="400px", background_color="blue"))
)

rstudio/rscpages documentation built on June 1, 2025, 3:57 p.m.