Skip to contents

Page Layouts

Page layouts are the basic building blocks of any UI. bslib pages always include Bootstrap and can be themed with bslib’s theming capabilities.

Dashboard layouts

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 page_fillable().

page_sidebar() experimental
A sidebar page (i.e., dashboard)
page_navbar()
Multi-page app with a top navigation bar
page_fillable() experimental
A screen-filling page layout

Basic page layouts

bslib variants of classic Shiny page layouts.

page() page_fluid() page_fixed()
Modern Bootstrap page layouts

User Interface Layouts

These functions help you layout the user interface (UI) elements of your app.

Multiple columns

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.

layout_columns()
Responsive 12-column grid layouts
layout_column_wrap() experimental
Column-first uniform grid layouts

Multiple panels

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.

Place input controls or additional context in a sidebar next to the main contents. Sidebar layouts combine well with cards and are built into the page_sidebar() and page_navbar() page layouts.

sidebar() layout_sidebar() toggle_sidebar() experimental
Sidebar layouts

Components

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

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 navset_card_*() functions.

Value box

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.

Accordions

Create collapsible sections of content. Each collapsible section is defined with accordion_panel() and the collection of sections are grouped together within an accordion().

Tooltips & Popovers

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!

tooltip() toggle_tooltip() update_tooltip() experimental
Add a tooltip to a UI element
popover() toggle_popover() update_popover() experimental
Add a popover to a UI element

Miscellaneous inputs

UI controls for capturing user input

input_switch() update_switch() toggle_switch() experimental
Switch input control
input_dark_mode() toggle_dark_mode() experimental
Dark mode input control
input_task_button() update_task_button()
Button for launching longer-running operations
bind_task_button()
Bind input_task_button to ExtendedTask

Theming

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.

Create a Bootstrap theme

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.

bs_theme() bs_theme_update() is_bs_theme()
Create a Bootstrap theme
bs_add_variables() bs_add_rules() bs_add_functions() bs_add_mixins() bs_bundle()
Add low-level theming customizations
font_face font_link font_google font_collection
Helpers for importing web fonts

Interactive theming

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.

bs_theme_preview()
Preview a Bootstrap theme
run_with_themer() bs_themer()
Theme customization UI

Dynamic theming

For package developers or advanced app authors, bslib provides tools for creating dynamically themable HTML widgets.

bs_dependency() bs_dependency_defer()
Themeable HTML components
bs_theme_dependencies()
Compile Bootstrap Sass with (optional) theming
bs_current_theme()
Obtain the currently active theme at render time

Global theme creation

Use Bootstrap themes globally.

Theme subsetting

Reduce the final CSS bundle size by removing unwanted portions of a Sass bundle.

bs_remove() bs_retrieve()
Remove or retrieve Sass code from a theme

Utility Functions

Fill items and fillable containers

Create and test for fill items and fillable containers.

Theming utility functions

bs_get_variables() bs_get_contrast()
Retrieve Sass variable values from the current theme
theme_version()
Obtain a theme's Bootstrap version
theme_bootswatch()
Obtain a theme's Bootswatch theme name
bootswatch_themes()
Obtain a list of all available bootswatch themes.
builtin_themes()
Obtain a list of all available built-in bslib themes.
versions() version_default()
Available Bootstrap versions

Other utility functions

breakpoints() experimental
Define breakpoint values