diff --git a/R/tt_bootstrap.R b/R/tt_bootstrap.R
index e7927831..b9fac76e 100644
--- a/R/tt_bootstrap.R
+++ b/R/tt_bootstrap.R
@@ -114,8 +114,9 @@ bootstrap_setting <- function(x, new, component = "row") {
     idx <- grep("tinytable columns before this", out)
   } else if (component == "cell") {
     idx <- grep("tinytable cells before this", out)
+     # idx <- 8 # hard-coded location (dangerous?)
   } else if (component == "css") {
-    idx <- grep("</style>", out, fixed = TRUE)
+    idx <- grep("</style>", out, fixed = TRUE)[1]
   } else if (component == "newrows") {
     idx <- grep("tinytable new rows before this", out)
   }
diff --git a/inst/templates/bootstrap.html b/inst/templates/bootstrap.html
index 6d98a1c5..51aafa5a 100644
--- a/inst/templates/bootstrap.html
+++ b/inst/templates/bootstrap.html
@@ -1,44 +1,17 @@
 <!DOCTYPE html> 
 <html lang="en">
-
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>$tinytable_TABLE_ID</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
-    <script>
-    function styleCell(i, j, css_id) {
-      var table = document.getElementById("$tinytable_TABLE_ID");
-      table.rows[i].cells[j].classList.add(css_id);
-    }
-    function insertSpanRow(i, colspan, content) {
-      var table = document.getElementById('$tinytable_TABLE_ID');
-      var newRow = table.insertRow(i);
-      var newCell = newRow.insertCell(0);
-      newCell.setAttribute("colspan", colspan);
-      newCell.innerText = content;
-    }
-    // tinytable cells before this
-    </script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
-    <script type="text/x-mathjax-config">
-      MathJax.Hub.Config({
-        tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
-      });
-    </script>
     <style>
-    table {
-      width: auto;
-      margin-left: auto;
-      margin-right: auto;
-    }
-    </style> 
+    </style>
   </head>
 
   <body>
     <div class="container">
-      <table class="$tinytable_BOOTSTRAP_CLASS" id="$tinytable_TABLE_ID" data-quarto-disable-processing="true">
+      <table class="$tinytable_BOOTSTRAP_CLASS" id="$tinytable_TABLE_ID" style="width: auto; margin-left: auto; margin-right: auto;" data-quarto-disable-processing='true'>
         <thead>
         $tinytable_BOOTSTRAP_CAPTION
         $tinytable_BOOTSTRAP_HEADER
@@ -50,6 +23,28 @@
       </table>
     </div>
 
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+    <script type="text/x-mathjax-config">
+      MathJax.Hub.Config({
+        tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
+      });
+    </script>
+    <script>
+    function styleCell(i, j, css_id) {
+      var table = document.getElementById("$tinytable_TABLE_ID");
+      table.rows[i].cells[j].classList.add(css_id);
+    }
+    function insertSpanRow(i, colspan, content) {
+      var table = document.getElementById('$tinytable_TABLE_ID');
+      var newRow = table.insertRow(i);
+      var newCell = newRow.insertCell(0);
+      newCell.setAttribute("colspan", colspan);
+      newCell.innerText = content;
+    }
+    // tinytable cells before this
+    </script>
+
   </body>
 
 </html>
diff --git a/vignettes/tutorial.qmd b/vignettes/tutorial.qmd
index 5a147ca7..12101ba8 100644
--- a/vignettes/tutorial.qmd
+++ b/vignettes/tutorial.qmd
@@ -83,7 +83,7 @@ tt(x, align = "ccrrl")
 The `width` arguments accepts a number between 0 and 1, indicating what proportion of the linewidth the table should cover:
 
 ```{r}
-tt(x, width = 0.3)
+tt(x, width = 0.5)
 ```
 
 ```{r}
