` element has been simplified. Similar to browser defaults, `
`s are All lists—`
- `, `
- `s reset `margin-left` to `0` and add `margin-bottom: .5rem`. `
- `s are **bolded**.
diff --git a/site/src/content/docs/customize/optimize.mdx b/site/src/content/docs/customize/optimize.mdx
index b251dfdfa7..d351f4a339 100644
--- a/site/src/content/docs/customize/optimize.mdx
+++ b/site/src/content/docs/customize/optimize.mdx
@@ -10,7 +10,6 @@ When using Sass in your asset pipeline, make sure you optimize Bootstrap by only
- If you're not using a component, comment it out or delete it entirely. For example, if you're not using the carousel, remove that import to save some file size in your compiled CSS. Keep in mind there are some dependencies across Sass imports that may make it more difficult to omit a file. ## Lean JavaScript diff --git a/site/src/content/docs/getting-started/vite.mdx b/site/src/content/docs/getting-started/vite.mdx index 3ab1812e65..ae0bacad83 100644 --- a/site/src/content/docs/getting-started/vite.mdx +++ b/site/src/content/docs/getting-started/vite.mdx @@ -152,7 +152,7 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s *You can also import our stylesheets individually if you want. [Read our Sass import docs]([[docsref:/customize/sass#importing]]) for details.* -3. **Next we load the CSS and import Bootstrap's JavaScript.** Add the following to `src/js/main.js` to load the CSS and import all of Bootstrap's JS. Popper will be imported automatically through Bootstrap. +2. **Next we load the CSS and import Bootstrap's JavaScript.** Add the following to `src/js/main.js` to load the CSS and import all of Bootstrap's JS. Popper will be imported automatically through Bootstrap. {/* TODO(Astro migration): */} ```js @@ -175,7 +175,7 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s *[Read our JavaScript docs]([[docsref:/getting-started/javascript/]]) for more information on how to use Bootstrap's plugins.* -4. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this: +3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this. 
diff --git a/site/src/content/docs/layout/old-grid.mdx b/site/src/content/docs/layout/old-grid.mdx
index 18675bfe79..708a7bd637 100644
--- a/site/src/content/docs/layout/old-grid.mdx
+++ b/site/src/content/docs/layout/old-grid.mdx
@@ -42,7 +42,7 @@ Breaking it down, here's how the grid system comes together:
- **Gutters are also responsive and customizable.** [Gutter classes are available]([[docsref:/layout/gutters]]) across all breakpoints, with all the same sizes as our [margin and padding spacing]([[docsref:/utilities/spacing]]). Change horizontal gutters with `.gx-*` classes, vertical gutters with `.gy-*`, or all gutters with `.g-*` classes. `.g-0` is also available to remove gutters.
-- **Sass variables, maps, and mixins power the grid.** If you don't want to use the predefined grid classes in Bootstrap, you can use our [grid's source Sass](#sass) to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.
+- **Sass variables, maps, and mixins power the grid.** If you don't want to use the predefined grid classes in Bootstrap, you can use our [grid's source Sass](#css) to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.
Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#flexbug-9).
diff --git a/site/src/content/docs/utilities/flex.mdx b/site/src/content/docs/utilities/flex.mdx
index 0ffbe01c89..c4df8fdbc7 100644
--- a/site/src/content/docs/utilities/flex.mdx
+++ b/site/src/content/docs/utilities/flex.mdx
@@ -405,7 +405,6 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all (
```
-
Responsive variations also exist for `flex-wrap`.
- `, and `
- `—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`. We've also reset the `padding-left` on `
- ` and `
- ` elements.
-* All lists have their top margin removed
-* And their bottom margin normalized
-* Nested lists have no bottom margin
- * This way they have a more even appearance
- * Particularly when followed by more list items
-* The left padding has also been reset
+
+- All lists have their top margin removed
+- And their bottom margin normalized
+- Nested lists have no bottom margin
+ - This way they have a more even appearance
+ - Particularly when followed by more list items
+- The left padding has also been reset
1. Here's an ordered list
2. With a few list items
3. It has the same overall look
4. As the previous unordered list
+
For simpler styling, clear hierarchy, and better spacing, description lists have updated `margin`s. `