Centering Rmarkdown knitrbootstrap Report - html

Question

Found this package called knitrBootstrap Which is to allow for Bootstrap style web pages when reporting in Rmarkdown.
Note: I am using the klippy, kableExtra, and knitrBootstrap
My issue is that when rendered is does not center the whole report, it is stuck to one side. And also the Title of the Document doesn't get displayed? Any suggestions to give this HTML page a more "fuller" feel? Because I can insert straight HTML code in Rmarkdown I added the HTML tag
---
output:
knitrBootstrap::bootstrap_document:
title: "Test file"
theme: united
highlight: sunburst
---
```{r}
library(kableExtra)
library(klippy)
library(knitrBootstrap)
```
```{r echo=FALSE, include=TRUE, out.width="100%"}
mpg_list <- split(mtcars$mpg, mtcars$cyl)
disp_list <- split(mtcars$disp, mtcars$cyl)
inline_plot <- data.frame(cyl = c(4, 6, 8), mpg_box = "", mpg_hist = "",
mpg_line1 = "", mpg_line2 = "",
mpg_points1 = "", mpg_points2 = "", mpg_poly = "")
inline_plot %>%
kbl(booktabs = TRUE) %>%
kable_paper(full_width = FALSE) %>%
column_spec(2, image = spec_boxplot(mpg_list)) %>%
column_spec(3, image = spec_hist(mpg_list)) %>%
column_spec(4, image = spec_plot(mpg_list, same_lim = TRUE)) %>%
column_spec(5, image = spec_plot(mpg_list, same_lim = FALSE)) %>%
column_spec(6, image = spec_plot(mpg_list, type = "p")) %>%
column_spec(7, image = spec_plot(mpg_list, disp_list, type = "p")) %>%
column_spec(8, image = spec_plot(mpg_list, polymin = 5))
```

Answer 1

I can't seem to find a ton of literature on the format you're using. However, I did notice that it doesn't change size when the screen size changes. It is all just set to one final size. That being said, the table thinks it is centered. In reality, it is formatted to 'fit' the contents, but the table is set to fill a space so that that outer space is centered in the body, but the table is left-aligned in that available space. On top of all that, the body is set to a max-width of 36em. That's why it looks left-aligned.
Clear as mud, I know. Sigh.
I can help make it better, but a different output format may be a better option. Almost any method I tried to make the table bigger destroyed the plots' SVG (distorted them).
This worked, but I don't know if the juice is worth the squeeze.
Add these styles between chunks and keep your code the same.
<style>
body {
max-width: 100%; // 36 em isn't working for me
}
table{
width: 924px !important;
height: auto;
}
tr {
height: 4em;
width: 924px !important; // 28 + (7*128) (for the 8 columns)
}
td {
vertical-align: middle !important;
padding-bottom: 0px !important;
}
svg {
width: 110%;
height: auto; // keep the aspect ratio
}
thead > tr *:not(:first-child) {
width: 128px; // only set here, if set to all td, it blows the svg
}
</style>
If you have any questions, let me know.
This centers, without centering, by filling the available space.