Learn R Programming

⚠️There's a newer version (2.3.4) of this package.Take me there.

bs4Dash

Bootstrap 4 shinydashboard using AdminLTE3

New users moving to bs4Dash v2.0.0

Taking the simple {shinydashboard} example:

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(),
  dashboardBody(
    # Boxes need to be put in a row (or column)
    fluidRow(
      box(plotOutput("plot1", height = 250)),

      box(
        title = "Controls",
        sliderInput("slider", "Number of observations:", 1, 100, 50)
      )
    )
  )
)

server <- function(input, output) {
  set.seed(122)
  histdata <- rnorm(500)

  output$plot1 <- renderPlot({
    data <- histdata[seq_len(input$slider)]
    hist(data)
  })
}

shinyApp(ui, server)

Starting from v2.0.0, moving to {bs4Dash} is rather simple:

library(bs4Dash)
ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(),
  dashboardBody(
    # Boxes need to be put in a row (or column)
    fluidRow(
      box(plotOutput("plot1", height = 250)),

      box(
        title = "Controls",
        sliderInput("slider", "Number of observations:", 1, 100, 50)
      )
    )
  )
)

server <- function(input, output) {
  set.seed(122)
  histdata <- rnorm(500)

  output$plot1 <- renderPlot({
    data <- histdata[seq_len(input$slider)]
    hist(data)
  })
}

shinyApp(ui, server)

Upgrading bs4Dash to 2.0.0

  • {bs4Dash} is undergoing major rework to make it easier to come from {shinydashboard}. The current development version 2.0.0 provides a 1:1 supports, in other word moving from {shinydashboard} to {bs4Dash} is accomplished by changing library(shinydashboard) to library(bs4Dash).

  • {bs4Dash} v2.0.0 also provides 1:1 with {shinydashboardPlus} to ease compatibility.

  • Apps built with {bs4Dash} version <= 0.5.0 are definitely not compatible with v2.0.0 due to substantial breaking changes in the API. We advise users to keep the old version for old apps and move to to the new version for newer apps.

Installation

# latest devel version
devtools::install_github("RinteRface/bs4Dash")
# from CRAN
install.packages("bs4Dash")

Demo

See a working example on shinyapps.io here. You may also run:

library(bs4Dash)
bs4DashGallery()

Issues

Issues are listed here.

Acknowledgement

I warmly thank Glyphicons creator for providing them for free with Bootstrap.

Code of Conduct

Please note that the bs4Dash project is released with a Contributor Code of Conduct. By contributing to this project, you agree toabide by its terms.

Copy Link

Version

Install

install.packages('bs4Dash')

Monthly Downloads

3,890

Version

2.3.3

License

GPL (>= 2) | file LICENSE

Issues

Pull Requests

Stars

Forks

Maintainer

David Granjon

Last Published

January 23rd, 2024

Functions in bs4Dash (2.3.3)

bs4Badge

Create a Bootstrap 4 dashboard badge item
bs4CardLabel

Create a label for Boostrap 4 card
cardDropdown

Create a box dropdown item list
app_container

Create container for bs4Dash demo app
createAlert

Create a Bootstrap 4 alert on the server side
appButton

AdminLTE2 special large button
bs4DashPage

Create a Boostrap 4 dashboard page
bs4DashSidebar

Create a Boostrap 4 dashboard main sidebar
attachmentBlock

AdminLTE3 attachment container
bs4Carousel

Bootstrap 4 carousel
dropdownMenuOutput

Create a dropdown menu output (client side)
bs4Callout

Create a Bootstrap 4 callout
cardProfile

AdminLTE3 card profile
findSidebarItem

Internally used by sidebarMenu to find treeview items and normal items.
bs4CardLayout

Bootstrap 4 container for cards
bs4Jumbotron

BS4 jumbotron for AdminLTE3
bs4ListGroup

BS4 list group for AdminLTE3
menuOutput

Create a dynamic menu output for bs4Dash (client side)
bs4CardSidebar

Create a sidebar for Boostrap 4 card
descriptionBlock

AdminLTE3 description block
bs4DashBrand

Alternative to simple text title
bs4ProgressBar

AdminLTE3 progress bar
toast

Create an adminLTE toast
bs4Quote

Boostrap 4 block quote
bs4Loading

AdminLTE3 loading state element
bs4DashControlbar

Create a Boostrap 4 dashboard right sidebar
bs4DashGallery

Launch the bs4Dash Gallery
navbarTab

Navbar tab item
tooltip

Create a Bootstrap 4 Tooltip from the UI side
bs4DashFooter

Dashboard Footer
bs4DashNavbar

Boostrap 4 dashboard navbar
renderbs4ValueBox

Create a value box (server side)
menuItemOutput

Create a sidebar menu item output (client side)
dropdownHeader

Dropdown header helper
renderMenu

Create dynamic menu output (server side)
bs4Accordion

Bootstrap 4 accordion container
actionButton

Bootstrap 4 Action button/link
bs4Ribbon

Boostrap 4 ribbon
validStatuses

Valid statuses
bs4DropdownMenu

Boostrap 4 dashboard dropdown menu
column

Boostrap 4 column system
validStatusesPlus

Valid statuses extra
getAdminLTEColors

Get all AdminLTE colors.
insertTab

Insert a tabPanel in a tabsetPanel
tagAssert

Assert that a tag has specified properties
renderbs4InfoBox

Boostrap 4 info box
ionicon

BS4 ionicons
sidebarMenuOutput

Create a sidebar menu output (client side)
bs4DashBody

Boostrap 4 dashboard body
bs4UserMenu

Bootstrap 4 user profile.
dropdownDivider

Create a box dropdown divider
validColors

Valid colors
bs4Timeline

AdminLTE3 timeline block
popover

Create a Bootstrap 4 popover from the UI side
validNuances

Valid nuances
productList

AdminLTE3 product list container
skinSelector

AdminLTE3 skin selector
bs4Table

Boostrap 4 table container
navbarDropdown

Build navbar dropdown for navigation
bs4SocialCard

AdminLTE3 social card
tabsetPanel

Create a tabsetPanel
bs4Sortable

BS4 sortable section
pagination

Bootstrap 4 pagination widget
useAutoColor

Plot auto-color module
bs4UserCard

AdminLTE3 widget user card
userPostMedia

AdminLTE3 user post media
userPost

AdminLTE3 user post
bs4Stars

AdminLTE3 stars
bs4TabCard

Create a Boostrap 4 tabCard
userList

AdminLTE3 user list container
userMessages

AdminLTE3 user message container