Some utility classes from Bootstrap are missing CSS styles
Closed this issue · 3 comments
Describe the problem
Some utility classes from Bootstrap are missing. For example, when I use the mr-2 class no styling is applied (somehow the corresponding CSS styles for that class are missing). Interestingly enough, it's not all (margin) utility classes that do not work. With d-flex or mt-2 I don't have an issue at all.
## d-flex class works
bslib::page_fluid(
htmltools::div(
class = 'd-flex',
htmltools::div('Box'),
htmltools::div('One')
)
)
## mr-2 class doesn't do anything
bslib::page_fluid(
htmltools::div(
class = 'd-flex',
htmltools::div(class = 'mr-2', 'Box'),
htmltools::div('One')
)
)
## Desired Output
bslib::page_fluid(
htmltools::div(
class = 'd-flex',
htmltools::div(style = 'margin-right: 0.5rem !important', 'Box'),
htmltools::div('One')
)
)
## mt-2 works though
bslib::page_fluid(
htmltools::div(
class = 'd-flex',
htmltools::div(class = 'mt-2', 'Box'),
htmltools::div('One')
)
)Session Info
─ Session info ─────────────────────────────────────────────────── setting value version R version 4.3.1 (2023-06-16 ucrt) os Windows 11 x64 (build 22621) system x86_64, mingw32 ui RStudio language (EN) collate German_Germany.utf8 ctype German_Germany.utf8 tz Europe/Berlin date 2024-11-08 rstudio 2023.12.1+402 Ocean Storm (desktop) pandoc NA─ Packages ───────────────────────────────────────────────────────
package * version date (UTC) lib source
bslib 0.8.0 2024-07-29 [1] CRAN (R 4.3.3)
cachem 1.0.8 2023-05-01 [1] CRAN (R 4.3.2)
cli 3.6.2 2023-12-11 [1] CRAN (R 4.3.2)
devtools 2.4.5 2022-10-11 [1] CRAN (R 4.3.3)
digest 0.6.34 2024-01-11 [1] CRAN (R 4.3.2)
ellipsis 0.3.2 2021-04-29 [1] CRAN (R 4.3.2)
fansi 1.0.6 2023-12-08 [1] CRAN (R 4.3.2)
fastmap 1.1.1 2023-02-24 [1] CRAN (R 4.3.2)
fs 1.6.3 2023-07-20 [1] CRAN (R 4.3.2)
glue 1.7.0 2024-01-09 [1] CRAN (R 4.3.2)
htmltools 0.5.8.1 2024-04-04 [1] CRAN (R 4.3.3)
htmlwidgets 1.6.4 2023-12-06 [1] CRAN (R 4.3.2)
httpuv 1.6.14 2024-01-26 [1] CRAN (R 4.3.2)
jquerylib 0.1.4 2021-04-26 [1] CRAN (R 4.3.2)
jsonlite 1.8.8 2023-12-04 [1] CRAN (R 4.3.2)
knitr 1.45 2023-10-30 [1] CRAN (R 4.3.2)
later 1.3.2 2023-12-06 [1] CRAN (R 4.3.2)
lifecycle 1.0.4 2023-11-07 [1] CRAN (R 4.3.2)
magrittr 2.0.3 2022-03-30 [1] CRAN (R 4.3.2)
memoise 2.0.1 2021-11-26 [1] CRAN (R 4.3.2)
mime 0.12 2021-09-28 [1] CRAN (R 4.3.1)
miniUI 0.1.1.1 2018-05-18 [1] CRAN (R 4.3.1)
pillar 1.9.0 2023-03-22 [1] CRAN (R 4.3.2)
pkgbuild 1.4.3 2023-12-10 [1] CRAN (R 4.3.2)
pkgconfig 2.0.3 2019-09-22 [1] CRAN (R 4.3.2)
pkgload 1.3.4 2024-01-16 [1] CRAN (R 4.3.2)
profvis 0.4.0 2024-09-20 [1] CRAN (R 4.3.3)
promises 1.2.1 2023-08-10 [1] CRAN (R 4.3.2)
purrr 1.0.2 2023-08-10 [1] CRAN (R 4.3.2)
R6 2.5.1 2021-08-19 [1] CRAN (R 4.3.2)
Rcpp 1.0.12 2024-01-09 [1] CRAN (R 4.3.2)
remotes 2.4.2.1 2023-07-18 [1] CRAN (R 4.3.2)
rlang 1.1.3 2024-01-10 [1] CRAN (R 4.3.2)
rstudioapi 0.16.0 2024-03-24 [1] CRAN (R 4.3.3)
sass 0.4.9 2024-03-15 [1] CRAN (R 4.3.3)
sessioninfo 1.2.2 2021-12-06 [1] CRAN (R 4.3.3)
shiny 1.8.1.1 2024-04-02 [1] CRAN (R 4.3.3)
tibble 3.2.1 2023-03-20 [1] CRAN (R 4.3.2)
urlchecker 1.0.1 2021-11-30 [1] CRAN (R 4.3.3)
usethis 3.0.0 2024-07-29 [1] CRAN (R 4.3.3)
utf8 1.2.4 2023-10-22 [1] CRAN (R 4.3.2)
vctrs 0.6.5 2023-12-01 [1] CRAN (R 4.3.2)
xfun 0.41 2023-11-01 [1] CRAN (R 4.3.2)
xtable 1.8-4 2019-04-21 [1] CRAN (R 4.3.2)[1] C:/Users/ATRP/AppData/Local/R/win-library/4.3
[2] C:/Program Files/R/R-4.3.1/library
──────────────────────────────────────────────────────────────────
Are you sure mr-* is the name of the class? IIRC it's me-* for margin-end, which in left-to-right languages is equivalent to margin-right.
Bootstrap introduced the new utility classes me-* and ms-* for margin-end and margin-start (replacing mr-* and ml-* for margin-right and margin-left) with Bootstrap 5
Oh my. I feel silly about this now. I googled the utility classes and the first thing that popped up is https://getbootstrap.com/docs/4.0/utilities/spacing/ so I just went with that but that's v.4.0 and I didn't imagine that mr- and ml- could be incorrect. Turns out in v.5 it's now ms- and me-. Thanks for your quick fixes :)