Learn R Programming

bs4Dash

Bootstrap 4 shinydashboard using AdminLTE3

From {shinydashboard} to {bs4Dash}

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)

Moving to {bs4Dash} is rather simple, as we just replace library(shinydashboard):

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)

Installation

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

Demo

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,540

Version

2.3.4

License

GPL (>= 2) | file LICENSE

Issues

Pull Requests

Stars

Forks

Maintainer

David Granjon

Last Published

September 3rd, 2024

Functions in bs4Dash (2.3.4)

bs4CardLabel

Create a label for Boostrap 4 card
cardDropdown

Create a box dropdown item list
attachmentBlock

AdminLTE3 attachment container
createAlert

Create a Bootstrap 4 alert on the server side
appButton

AdminLTE2 special large button
bs4CardLayout

Bootstrap 4 container for cards
cardProfile

AdminLTE3 card profile
bs4Accordion

Bootstrap 4 accordion container
actionButton

Bootstrap 4 Action button/link
bs4DashBody

Boostrap 4 dashboard body
column

Boostrap 4 column system
bs4Carousel

Bootstrap 4 carousel
bs4Callout

Create a Bootstrap 4 callout
bs4DashPage

Create a Boostrap 4 dashboard page
bs4DashSidebar

Create a Boostrap 4 dashboard main sidebar
bs4Badge

Create a Bootstrap 4 dashboard badge item
findSidebarItem

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

Launch the bs4Dash Gallery
bs4DashNavbar

Boostrap 4 dashboard navbar
dropdownHeader

Dropdown header helper
dropdownMenuOutput

Create a dropdown menu output (client side)
bs4DashFooter

Dashboard Footer
bs4CardSidebar

Create a sidebar for Boostrap 4 card
menuOutput

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

Navbar tab item
bs4DropdownMenu

Boostrap 4 dashboard dropdown menu
getAdminLTEColors

Get all AdminLTE colors.
bs4DashBrand

Alternative to simple text title
descriptionBlock

AdminLTE3 description block
bs4Loading

AdminLTE3 loading state element
bs4Jumbotron

BS4 jumbotron for AdminLTE3
renderbs4InfoBox

Boostrap 4 info box
bs4Quote

Boostrap 4 block quote
bs4ProgressBar

AdminLTE3 progress bar
bs4Ribbon

Boostrap 4 ribbon
sidebarMenuOutput

Create a sidebar menu output (client side)
renderMenu

Create dynamic menu output (server side)
bs4ListGroup

BS4 list group for AdminLTE3
bs4Stars

AdminLTE3 stars
skinSelector

AdminLTE3 skin selector
bs4UserMenu

Bootstrap 4 user profile.
bs4DashControlbar

Create a Boostrap 4 dashboard right sidebar
dropdownDivider

Create a box dropdown divider
toast

Create an adminLTE toast
tagAssert

Assert that a tag has specified properties
bs4TabCard

Create a Boostrap 4 tabCard
navbarDropdown

Build navbar dropdown for navigation
ionicon

BS4 ionicons
insertTab

Insert a tabPanel in a tabsetPanel
pagination

Bootstrap 4 pagination widget
tooltip

Create a Bootstrap 4 Tooltip from the UI side
menuItemOutput

Create a sidebar menu item output (client side)
bs4Table

Boostrap 4 table container
tabsetPanel

Create a tabsetPanel
userList

AdminLTE3 user list container
popover

Create a Bootstrap 4 popover from the UI side
useAutoColor

Plot auto-color module
productList

AdminLTE3 product list container
bs4Sortable

BS4 sortable section
userPost

AdminLTE3 user post
bs4SocialCard

AdminLTE3 social card
userMessages

AdminLTE3 user message container
bs4UserCard

AdminLTE3 widget user card
userPostMedia

AdminLTE3 user post media
validStatusesPlus

Valid statuses extra
bs4Timeline

AdminLTE3 timeline block
validStatuses

Valid statuses
renderbs4ValueBox

Create a value box (server side)
validColors

Valid colors
validNuances

Valid nuances
app_container

Create container for bs4Dash demo app