Skip to contents

Enabling bootstrap 4

Source: vignettes/articles/enabling-bootstrap4.Rmd
enabling-bootstrap4.Rmd

The ability to create cards is already available via the bootstrap library that is already incorporated into many html-based R markdown outputs. However, this functionality is not automatically exposed to the R markdown user. With this in mind the goal of bs4cards is to provide a convenient interface to the cards system system introduced in bootstrap version 4.

The first step in using the package is to make sure that your R markdown document uses version 4 of bootstrap. The default behaviour of R markdown when creating HTML documents is to use bootstrap version 3, so this setting needs to be altered. To ensure that you are using bootstrap 4, you need to edit the YAML header for your document to specify which version of bootstrap you want to use. The instructions are slightly different depending on what kind of document you’re creating:

Vanilla R markdown

For a plain R markdown document or website (i.e., one where the output format is html_document) here is the relevant section of YAML you might use:

output:
  html_document:
    theme:
      version: 4

This overrides the R markdown defaults to ensure that the output is built using bootstrap 4.5.

Pkgdown

The process for a pkgdown site is similar but not identical. As of version 2.0, pkgdown supports bootstrap 3 (the default) and bootstrap 5, but it does not support bootstrap 4. However, bootstrap 5 and bootstrap 4 are sufficiently similar that (as far as I have been able to determine) the bs4cards package functionality works fine with bootstrap 5. To set the bootstrap version, edit the _pkgdown.yml file to include the following

template:
  bootstrap: 5

Note that this requires pkgdown version 2.0 to work.

Distill

Distill R markdown does not use bootstrap, which is a little inconvenient if you want to use bs4cards with distill. With a little effort it is possible to enable the entire bootstrap library in a distill site, but this can lead to undesirable side-effects because bootstrap has a lot of styling that doesn’t look visually appealing when mixed with the istill styling. The solution I’ve adopted for this is to use a custom bootstrap build that includes a minimal number of bootstrap components. If you want to try the same approach, you can download the strapless.css file to the same folder as the distill post you want to enable it for, and include the following YAML in the post header:

output:
  distill::distill_article:
    css: "strapless.css"

If you want to enable strapless for the entire site, this markup goes in the _site.yml file and the css file should go in the home folder for the project. Once that’s done you should be ready to go. That being said, you’d be wise to be careful when adopting this approach: the strapless build is a crude hack, and I haven’t tested it very thoroughly.