Use bs_add_variables() to add Bootstrap Sass variable defaults, bs_add_rules() to add additional Sass rules, and bs_add_declarations() to add Sass functions and mixins. Compared to higher-level theme customization available in bs_theme(), these functions are a more direct interface to Bootstrap Sass, and therefore, do nothing to ensure theme customizations are portable between major Bootstrap versions.

  .where = "defaults",
  .default_flag = identical(.where, "defaults")

bs_add_rules(theme, rules)

bs_add_declarations(theme, declarations)

bs_add_layers(theme, ...)



a bs_theme() object.


For bs_add_variables(), these arguments should contain Sass variables; otherwise, these arguments should contain sass::sass_layer()s.


whether to place the variable definitions before other Sass "defaults", after other Sass "declarations", or after other Sass "rules".


whether or not to add a !default flag (if missing) to variable expressions. It's recommended to keep this as TRUE when .where = "defaults".


Sass rules.


Sass functions and mixins.



# Function to preview the styling a (primary) Bootstrap button library(htmltools) button <- tags$a(class = "btn btn-primary", href = "#", role = "button", "Hello") preview_button <- function(theme) { browsable(tags$body(bs_theme_dependencies(theme), button)) } # Here we start with a theme based on a Bootswatch theme, # then override some variable defaults theme <- bs_theme(bootswatch = "sketchy", primary = "orange") %>% bs_add_variables( "body-bg" = "#EEEEEE", "font-family-base" = "monospace", "font-size-base" = "1.4rem", "btn-padding-y" = ".16rem", "btn-padding-x" = "2rem" ) preview_button(theme) # If you need to set a variable based on another Bootstrap variable theme %>% bs_add_variables("body-color" = "$success", .where = "declarations") %>% preview_button() # Start a new global theme and add some custom rules that # use Bootstrap variables to define a custom styling for a # 'person card' person_rules <- system.file("custom", "person.scss", package = "bootstraplib") theme <- bs_theme() %>% bs_add_rules(sass::sass_file(person_rules)) # Include custom CSS that leverages bootstrap Sass variables person <- function(name, title, company) { tags$div( class = "person", h3(class = "name", name), div(class = "title", title), div(class = "company", company) ) } browsable(shiny::fluidPage( theme = theme, person("Andrew Carnegie", "Owner", "Carnegie Steel Company"), person("John D. Rockefeller", "Chairman", "Standard Oil") ))