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:
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:
I am just wondering:
card()
function from the bslib
package to create a horizontal card so that the description is on the right, instead of at the bottom?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)