diff --git a/docs/components/card.md b/docs/components/card.md index f843838476..b45d134634 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -1,7 +1,7 @@ --- layout: docs title: Cards -description: Bootstrap Cards provide a flexible and extensible content container with multiple variants and options. +description: Bootstrap's cards provide a flexible and extensible content container with multiple variants and options. group: components --- @@ -18,7 +18,7 @@ If you're familiar with Bootstrap 3, cards replace our old panels, wells, and th Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. -Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of it's parent element. This is easily customized with our various [sizing options](#sizing). +Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. This is easily customized with our various [sizing options](#sizing). {% example html %}
@@ -51,7 +51,7 @@ The building block of a card is the `.card-block`. Use it whenever you need a pa Card titles are used by adding `.card-title` to a `` tag. In the same way, links are added and placed next to each other by adding `.card-link` to a `` tag. -Subtitles are used by adding a `.card-subtitle` to an `` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-block` item, the card title and subtitle are aligned nicely. +Subtitles are used by adding a `.card-subtitle` to a `` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-block` item, the card title and subtitle are aligned nicely. {% example html %}
diff --git a/docs/components/forms.md b/docs/components/forms.md index 9f1e231c71..17a96a1136 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -1,7 +1,7 @@ --- layout: docs title: Forms -description: Examples and usage guidelines for from controls, form layouts, and custom forms. +description: Examples and usage guidelines for form controls, form layouts, and custom forms. group: components --- diff --git a/docs/components/modal.md b/docs/components/modal.md index 5ace1ac58e..d61151f8f8 100644 --- a/docs/components/modal.md +++ b/docs/components/modal.md @@ -19,7 +19,7 @@ Before getting started with Bootstrap's modal component, be sure to read the fol - Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the `` so that modal content scrolls instead. - Clicking on the modal "backdrop" will automatically close the modal. - Bootstrap only supports one modal window at a time. Nested modals aren't supported as we believe them to be poor user experiences. -- Modal's use `position: fixed`, which can sometimes be a bit particular about it's rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You'll likely run into issues when nesting a `.modal` within another fixed element. +- Modals use `position: fixed`, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You'll likely run into issues when nesting a `.modal` within another fixed element. - One again, due to `position: fixed`, there are some caveats with using modals on mobile devices. [See our browser support docs]({{ site.baseurl }}/getting-started/browsers-devices/#modals-and-dropdowns-on-mobile) for details. - Lastly, the `autofocus` HTML attribute has no affect in modals. Here's how you can achieve the same effect with custom JavaScript. diff --git a/docs/components/navs.md b/docs/components/navs.md index fed519e8e5..5b9397fc11 100644 --- a/docs/components/navs.md +++ b/docs/components/navs.md @@ -206,7 +206,7 @@ For equal-width elements, use `.nav-justified`. All horizontal space will be occ ## Working with flex utilities -If you need responsive nav variations, consider using a series of [flex utilities](). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint. +If you need responsive nav variations, consider using a series of [flexbox utilities]({{ site.baseurl }}/utilities/flexbox/). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint. {% example html %}