You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: bootstrap/docs/components/placeholders/index.html
+13-13Lines changed: 13 additions & 13 deletions
Original file line number
Diff line number
Diff line change
@@ -1230,16 +1230,16 @@ <h2>Other frameworks</h2>
1230
1230
1231
1231
1232
1232
<h2id="about">About <aclass="anchor-link" href="#about" aria-label="Link to this section: About"></a></h2>
1233
-
<p>Placeholders can be used to enhance the experience of your application. They’re built only with HTML and CSS, meaning you don’t need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, color, and sizing can be easily customized with our utility classes.</p>
1233
+
<p>Bootstrap placeholders can enhance your application’s user experience. They’re built exclusively with HTML and CSS, so you don’t need any JavaScript to create them. However, you’ll require some custom JavaScript to toggle their visibility. Their appearance, color, and size can be easily customized using our utility classes.</p>
1234
1234
<h2id="example">Example <aclass="anchor-link" href="#example" aria-label="Link to this section: Example"></a></h2>
1235
-
<p>In the example below, we take a typical card component and recreate it with placeholders applied to create a “loading card”. Size and proportions are the same between the two.</p>
1235
+
<p>In the example below, we use the Bootstrap card component and modify it with placeholders to form a “loading card.” The size and proportions remain consistent between the two.</p>
</span></span><spanclass="line"><spanclass="cl"><spanclass="p"><</span><spanclass="nt">p</span><spanclass="na">class</span><spanclass="o">=</span><spanclass="s">"card-text"</span><spanclass="p">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<spanclass="p"></</span><spanclass="nt">p</span><spanclass="p">></span>
</span></span><spanclass="line"><spanclass="cl"><spanclass="p"><</span><spanclass="nt">p</span><spanclass="na">class</span><spanclass="o">=</span><spanclass="s">"card-text"</span><spanclass="p">></span>Some brief example text to expand on the card title and form most of the card's content.<spanclass="p"></</span><spanclass="nt">p</span><spanclass="p">></span>
</span></span></code></pre></div><h2id="how-it-works">How it works <aclass="anchor-link" href="#how-it-works" aria-label="Link to this section: How it works"></a></h2>
1291
-
<p>Create placeholders with the <code>.placeholder</code> class and a grid column class (e.g., <code>.col-6</code>) to set the <code>width</code>. They can replace the text inside an element or be added as a modifier class to an existing component.</p>
1292
-
<p>We apply additional styling to <code>.btn</code>s via <code>::before</code> to ensure the <code>height</code> is respected. You may extend this pattern for other situations as needed, or add a <code>&nbsp;</code>within the element to reflect the height when actual text is rendered in its place.</p>
1291
+
<p>Create placeholders using the <code>.placeholder</code> class along with a grid column class (e.g., <code>.col-6</code>) to define the <code>width</code>. These placeholders can either replace text inside an element or be added as a modifier class to an existing component.</p>
1292
+
<p>To ensure the <code>height</code> is maintained, we style <code>.btn</code>s with <code>::before</code>. This pattern can be expanded for other cases or a <code>&nbsp;</code>can be added inside the element to match the height when actual text appears.</p>
The use of <code>aria-hidden="true"</code>only indicates that the element should be hidden to screen readers. The <em>loading</em> behavior of the placeholder depends on how authors will actually use the placeholder styles, how they plan to update things, etc. Some JavaScript code may be needed to <em>swap</em> the state of the placeholderand inform AT users of the update.
1320
+
Using <code>aria-hidden="true"</code>simply tells screen readers to ignore the element. The actual <em>loading</em> behavior of the placeholder depends on how authors implement and style the placeholder, as well as how they update it. Some JavaScript may be necessary to <em>toggle</em> the placeholder’s state and notify AT users of the change.
1321
1321
</div>
1322
1322
<h3id="width">Width <aclass="anchor-link" href="#width" aria-label="Link to this section: Width"></a></h3>
1323
-
<p>You can change the <code>width</code>through grid column classes, width utilities, or inline styles.</p>
1323
+
<p>You can adjust the <code>width</code>using grid column classes, width utilities, or inline styles.</p>
<h3id="sizing">Sizing <aclass="anchor-link" href="#sizing" aria-label="Link to this section: Sizing"></a></h3>
1385
-
<p>The size of <code>.placeholder</code>s are based on the typographic style of the parent element. Customize them with sizing modifiers: <code>.placeholder-lg</code>, <code>.placeholder-sm</code>, or <code>.placeholder-xs</code>.</p>
1385
+
<p>The size of <code>.placeholder</code>s depends on the typographic style of the parent element. Customize them with size modifiers: <code>.placeholder-lg</code>, <code>.placeholder-sm</code>, or <code>.placeholder-xs</code>.</p>
<h3id="animation">Animation <aclass="anchor-link" href="#animation" aria-label="Link to this section: Animation"></a></h3>
1411
-
<p>Animate placeholders with<code>.placeholder-glow</code> or <code>.placeholder-wave</code> to better convey the perception of something being <em>actively</em>loaded.</p>
1411
+
<p>Animate Bootstrap placeholders using<code>.placeholder-glow</code> or <code>.placeholder-wave</code> to visually suggest that content is <em>actively</em>loading.</p>
Copy file name to clipboardExpand all lines: bootstrap/docs/components/placeholders/llm.md
+14-14Lines changed: 14 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,19 +6,18 @@ Use loading placeholders for your components or pages to indicate something may
6
6
7
7
## Bootstrap 5 Placeholders – About
8
8
9
-
Placeholders can be used to enhance the experience of your application. They're built only with HTML and CSS, meaning you don't need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, color, and sizing can be easily customized with our utility classes.
9
+
Bootstrap placeholders can enhance your application's user experience. They're built exclusively with HTML and CSS, so you don't need any JavaScript to create them. However, you'll require some custom JavaScript to toggle their visibility. Their appearance, color, and size can be easily customized using our utility classes.
10
10
11
11
## Bootstrap 5 Placeholders – Example
12
12
13
-
In the example below, we take a typical card component and recreate it with placeholders applied to create a "loading card". Size and proportions are the same between the two.
14
-
13
+
In the example below, we use the Bootstrap card component and modify it with placeholders to form a "loading card." The size and proportions remain consistent between the two.
@@ -73,9 +72,10 @@ In the example below, we take a typical card component and recreate it with plac
73
72
74
73
## Bootstrap 5 Placeholders – How it works
75
74
76
-
Create placeholders with the `.placeholder` class and a grid column class (e.g., `.col-6`) to set the `width`. They can replace the text inside an element or be added as a modifier class to an existing component.
75
+
Create placeholders using the `.placeholder` class along with a grid column class (e.g., `.col-6`) to define the `width`. These placeholders can either replace text inside an element or be added as a modifier class to an existing component.
76
+
77
+
To ensure the `height` is maintained, we style `.btn`s with `::before`. This pattern can be expanded for other cases or a `` can be added inside the element to match the height when actual text appears.
77
78
78
-
We apply additional styling to `.btn`s via `::before` to ensure the `height` is respected. You may extend this pattern for other situations as needed, or add a `` within the element to reflect the height when actual text is rendered in its place.
79
79
80
80
```html
81
81
<paria-hidden="true">
@@ -86,12 +86,12 @@ We apply additional styling to `.btn`s via `::before` to ensure the `height` is
86
86
```
87
87
88
88
89
-
The use of `aria-hidden="true"`only indicates that the element should be hidden to screen readers. The *loading* behavior of the placeholder depends on how authors will actually use the placeholder styles, how they plan to update things, etc. Some JavaScript code may be needed to *swap* the state of the placeholderand inform AT users of the update.
89
+
Using `aria-hidden="true"`simply tells screen readers to ignore the element. The actual *loading* behavior of the placeholder depends on how authors implement and style the placeholder, as well as how they update it. Some JavaScript may be necessary to *toggle* the placeholder's state and notify AT users of the change.
90
90
91
91
92
92
### Bootstrap 5 Placeholders – Width
93
93
94
-
You can change the `width`through grid column classes, width utilities, or inline styles.
94
+
You can adjust the `width`using grid column classes, width utilities, or inline styles.
95
95
96
96
```html
97
97
<spanclass="placeholder col-6"></span>
@@ -101,7 +101,7 @@ You can change the `width` through grid column classes, width utilities, or inli
101
101
102
102
### Bootstrap 5 Placeholders – Color
103
103
104
-
By default, the `placeholder` uses `currentColor`. This can be overridden with a custom color or utility class.
104
+
By default, the `placeholder` uses `currentColor`, but this can be replaced with a custom color or utility class.
105
105
106
106
```html
107
107
<spanclass="placeholder col-12"></span>
@@ -118,7 +118,7 @@ By default, the `placeholder` uses `currentColor`. This can be overridden with a
118
118
119
119
### Bootstrap 5 Placeholders – Sizing
120
120
121
-
The size of `.placeholder`s are based on the typographic style of the parent element. Customize them with sizing modifiers: `.placeholder-lg`, `.placeholder-sm`, or `.placeholder-xs`.
121
+
The size of `.placeholder`s depends on the typographic style of the parent element. Customize them with size modifiers: `.placeholder-lg`, `.placeholder-sm`, or `.placeholder-xs`.
0 commit comments