diff --git a/docs/content/code.md b/docs/content/code.md index a62e0845ff..ddd7b9031a 100644 --- a/docs/content/code.md +++ b/docs/content/code.md @@ -3,15 +3,9 @@ layout: docs title: Code description: Documentation and examples for displaying inline and multiline blocks of code with Bootstrap. group: content +toc: true --- -Styles for inline code snippets and longer, multiline blocks of code. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - ## Inline code Wrap inline snippets of code with ``. Be sure to escape HTML angle brackets. diff --git a/docs/content/images.md b/docs/content/images.md index a892064888..dc4ce9a9af 100644 --- a/docs/content/images.md +++ b/docs/content/images.md @@ -1,17 +1,11 @@ --- layout: docs title: Images -description: Documentation and examples for styling images with Bootstrap. +description: Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes. group: content +toc: true --- -Opt your images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - ## Responsive images Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element. diff --git a/docs/content/reboot.md b/docs/content/reboot.md index ab65fe1725..e896d50269 100644 --- a/docs/content/reboot.md +++ b/docs/content/reboot.md @@ -1,22 +1,16 @@ --- layout: docs title: Reboot -description: Documentation and examples for Reboot, Bootstrap's collection of element-specific CSS that heavily builds on Normalize.css. +description: Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon. group: content redirect_from: "/content/" +toc: true --- -Part of Bootstrap's job is to provide an elegant, consistent, and simple baseline to build upon. We use Reboot, a collection of element-specific CSS changes in a single file, to kickstart that. +## Approach Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some `` styles for a simpler baseline and later provide `.table`, `.table-bordered`, and more. -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - -## Approach - Here are our guidelines and reasons for choosing what to override in Reboot: - Update some browser default values to use `rem`s instead of `em`s for scalable component spacing. diff --git a/docs/content/tables.md b/docs/content/tables.md index 62579ac69d..c7523b8394 100644 --- a/docs/content/tables.md +++ b/docs/content/tables.md @@ -1,19 +1,15 @@ --- layout: docs title: Tables -description: Documentation and examples for styling tables with Bootstrap. +description: Documentation and examples for opt-in styling of tables (given their prevelant use in JavaScript plugins) with Bootstrap. group: content +toc: true --- -Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any `
`, then extend with custom styles or our various included modifier classes. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - ## Examples +Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any `
`, then extend with custom styles or our various included modifier classes. + Using the most basic table markup, here's how `.table`-based tables look in Bootstrap. **All table styles are inherited in Bootstrap 4**, meaning any nested tables will be styled in the same manner as the parent. {% example html %} diff --git a/docs/content/typography.md b/docs/content/typography.md index 4fe5bbe021..249e1392e5 100644 --- a/docs/content/typography.md +++ b/docs/content/typography.md @@ -1,20 +1,14 @@ --- layout: docs title: Typography -description: Documentation and examples for Bootstrap typography, including global settings, body text, lists, and more. +description: Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more. group: content +toc: true --- -Bootstrap includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the [textual utility classes]({{ site.baseurl }}/utilities/typography/). - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - ## Global settings -Bootstrap sets basic global display, typography, and link styles. Specifically, we: +Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the [textual utility classes]({{ site.baseurl }}/utilities/typography/). - Use a [native font stack]({{ site.baseurl }}/content/reboot/#native-font-stack) that selects the best `font-family` for each OS and device. - For a more inclusive and accessible type scale, we assume the browser default root `font-size` (typically 16px) so visitors can customize their browser defaults as needed.