Page layouts are the basic building blocks of any UI. bslib pages always include Bootstrap and can be themed with bslib’s theming capabilities.
These page layouts work best for dashboards. For a single-page dashboards with an optional sidebar, try
page_sidebar(). For multi-tab dashboards organized as pages in a navbar, also with an optional sidebar, try
page_navbar(). For a full-page dashboard with items that fill the screen, try
- A sidebar page (i.e., dashboard)
- Multi-page app with a top navigation bar
- A screen-filling page layout
These functions help you layout the user interface (UI) elements of your app.
Organize UI elements into Bootstrap’s 12-column CSS grid with
layout_columns(). Or organize elements into a grid of equal-width columns with
layout_column_wrap(). Both functions can layout an arbitrary number of elements without needing to specify the number of columns, but
layout_columns() can be used to create more complex layouts whereas
layout_column_wrap() creates a grid of equal column and row sizes.
- Responsive 12-column grid layouts
- Column-first uniform grid layouts
Create tabbed sections of content. First, choose the style of navigation container. Then add navigation panels or items to the container. You can programmatically control or update the navigation containers with server-side logic.
- Navigation containers
bslib brings a collection of Bootstrap components to Shiny. These components require the latest version of Bootstrap and work best when used with the page functions listed above.
Cards are a great way to group content into a single, contained unit. Cards combine nicely with many other functions in bslib. They can be added to dashboard page layouts, laid out with helpers like
layout_columns(), or have sidebars when used with
layout_sidebar(). You can even create tabbed card interfaces with the
- A Bootstrap card component
Value boxes are a special type of card that highlight a single piece of information, optionally showcasing an icon or plot. They are often used in dashboard layouts to highlight key metrics.
Provide details on demand. In general, tooltips are ephemeral and provide a little extra information when the user hovers over or focuses on an element. Popovers are more persistent and are triggered by a click or via the keyboard. Popovers can include more content than tooltips – even Shiny inputs and outputs!
bslib provides a flexible interface for customizing Bootstrap themes. You can create your own Bootstrap themes, customize existing themes, or create dynamic themes that can even be modified at runtime.
Tools for creating customized Bootstrap themes. Create your own, highly customized theme, or use a preset theme – either built into bslib or provided by Bootswatch.
- Add low-level theming customizations
Preview and interactively modify Bootstrap themes. Use
bs_theme_preview() for a preview of your theme in a Shiny app with many example components. Use
run_with_themer() to run an existing Shiny app with the theme editor or
bs_themer() to add the theme editor UI to your app or R Markdown document.
For package developers or advanced app authors, bslib provides tools for creating dynamically themable HTML widgets.
- Compile Bootstrap Sass with (optional) theming
- Obtain the currently active theme at render time
- Obtain a theme's Bootstrap version
- Obtain a theme's Bootswatch theme name
- Obtain a list of all available bootswatch themes.
- Obtain a list of all available built-in bslib themes.
- Define breakpoint values