rshinybslib

Is it possible to make a card horizontal in Shiny with the bslib package?


I am learning to apply Bootstrap 5 (BS5) and would like to incorporate some of its features into the Shiny app I am currently developing.

While reading the documentation for BS5, I discovered that it is possible to make a card element go horizontal. The example HTML code from the documentation is:

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

And the output looks like this:

enter image description here

Here is a simple Shiny app with a card() element:

library(shiny)
library(bslib)
library(ggplot2)

ui <- page(
    
    card(
        card_header(
            "Defult Card from bslib package (vertival layout)"
        ),
        card_body(
            
            plotOutput(outputId = "plot")
        ),
        card_body(
            "This famous (Fisher's or Anderson's) iris data set gives the measurements in
            centimeters of the variables sepal length and width and petal length and width,
            respectively, for 50 flowers from each of 3 species of iris. The species are Iris
            setosa, versicolor, and virginica."
        )
    )
)

server <- function(input, output, session) {
    
    output$plot <- renderPlot({
        
        iris |>
            ggplot(aes(x = Sepal.Length, y = Sepal.Width)) +
            geom_point() +
            theme_minimal()
    })
}

shinyApp(ui, server)

And the card element looks like this:

enter image description here

I am just wondering:

  1. Is it possible to use the native card() function from the bslib package to create a horizontal card so that the description is on the right, instead of at the bottom?
  2. If not, what's the best approach to embed the HTML code into the Shiny app so that it can communicate with other inputs and outputs?

Solution

  • You can place the description on the right if you use a column-based layout, e.g. by applying bslib's built-in function layout_column_wrap() inside card_body() like this:

    library(shiny)
    library(bslib)
    library(ggplot2)
    
    ui <- page(
      card(
        card_header("Defult Card from bslib package (vertical layout)"),
        card_body(
          layout_column_wrap(
            width = 1/2,
            plotOutput(outputId = "plot"),
            "This famous (Fisher's or Anderson's) iris data set gives the measurements in
                centimeters of the variables sepal length and width and petal length and width,
                respectively, for 50 flowers from each of 3 species of iris. The species are Iris
                setosa, versicolor, and virginica."
          )
        )
      )
    )
    
    server <- function(input, output, session) {
      output$plot <- renderPlot({
        iris |>
          ggplot(aes(x = Sepal.Length, y = Sepal.Width)) +
          geom_point() +
          theme_minimal()
      })
    }
    
    shinyApp(ui, server)
    

    enter image description here