root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 11 Packages Projects Releases Wiki Activity

Docs: use `Example` shortcode instead of divs with only `.bd-example` class (#41556)
BrowserStack / browserstack (push) Has been cancelled Details
Bundlewatch / bundlewatch (push) Has been cancelled Details
CodeQL / Analyze (push) Has been cancelled Details
cspell / cspell (push) Has been cancelled Details
CSS / css (push) Has been cancelled Details
Docs / docs (push) Has been cancelled Details
JS Tests / JS Tests (push) Has been cancelled Details
Lint / lint (push) Has been cancelled Details
CSS (node-sass) / css (push) Has been cancelled Details
Release notes / update_release_draft (push) Has been cancelled Details

This commit is contained in:
Julien Déramond 2025-06-19 18:56:42 +02:00 committed by GitHub
parent 094fb64680
commit b851a994bd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 573 additions and 574 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
site/src/assets/examples/cheatsheet-rtl/index.astro
View File

@ -1418,7 +1418,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
</div> </div>
<div> <div>
<div class="bd-example"> <Example showMarkup={false} code={`
<nav id="navbar-example2" class="navbar bg-body-tertiary px-3"> <nav id="navbar-example2" class="navbar bg-body-tertiary px-3">
<a class="navbar-brand" href="#">شريط التنقل</a> <a class="navbar-brand" href="#">شريط التنقل</a>
<ul class="nav nav-pills"> <ul class="nav nav-pills">
@ -1452,7 +1452,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
<p>وكما يتبيّن لنا، من عدد الحلول الملطِّفة للمشكلة، ومن تنوّعها، وهي الحلول التي أسلفنا الحديث عنها، فإن التكنولوجيا التي نحتاج إليها من أجل معالجة هذه التحديات، هي في مدى قدرتنا، لكنها ربما تتطلّب بعض التحسين، ودعماً استثمارياً أكبر!</p> <p>وكما يتبيّن لنا، من عدد الحلول الملطِّفة للمشكلة، ومن تنوّعها، وهي الحلول التي أسلفنا الحديث عنها، فإن التكنولوجيا التي نحتاج إليها من أجل معالجة هذه التحديات، هي في مدى قدرتنا، لكنها ربما تتطلّب بعض التحسين، ودعماً استثمارياً أكبر!</p>
<p>ولا مانع من إضافة محتوى آخر ليس تحت أي قسم معين.</p> <p>ولا مانع من إضافة محتوى آخر ليس تحت أي قسم معين.</p>
</div> </div>
</div> `} />
</div> </div>
</article> </article>
<article class="my-3" id="spinners"> <article class="my-3" id="spinners">

4
site/src/assets/examples/cheatsheet/index.astro
View File

@ -1394,7 +1394,7 @@ export const body_class = 'bg-body-tertiary'
</div> </div>
<div> <div>
<div class="bd-example"> <Example showMarkup={false} code={`
<nav id="navbar-example2" class="navbar bg-body-tertiary px-3"> <nav id="navbar-example2" class="navbar bg-body-tertiary px-3">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills"> <ul class="nav nav-pills">
@ -1427,7 +1427,7 @@ export const body_class = 'bg-body-tertiary'
<h4 id="scrollspyHeading5">Fifth heading</h4> <h4 id="scrollspyHeading5">Fifth heading</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
</div> </div>
</div> `} />
</div> </div>
</article> </article>
<article class="my-3" id="spinners"> <article class="my-3" id="spinners">

11
site/src/components/shortcodes/Table.astro
View File

@ -1,5 +1,6 @@
--- ---
import Code from '@shortcodes/Code.astro' import Code from '@shortcodes/Code.astro'
import Example from '@shortcodes/Example.astro'
import * as tableContent from '@shortcodes/TableContent.md' import * as tableContent from '@shortcodes/TableContent.md'
interface Props { interface Props {
@ -20,12 +21,12 @@ const { class: className, simplified = true } = Astro.props
const tableCode = `<table${className ? ` class="${className}"` : ''}> const tableCode = `<table${className ? ` class="${className}"` : ''}>
${simplified ? ' ...' : await tableContent.compiledContent()} ${simplified ? ' ...' : await tableContent.compiledContent()}
</table>` </table>`
const exampleCode = `<table${className ? ` class="${className}"` : ''}>
${await tableContent.compiledContent()}
</table>`
--- ---
<div class="bd-example"> <Example showMarkup={false} code={exampleCode} />
<table class={className}>
<tableContent.Content />
</table>
</div>
<Code code={tableCode} lang="html" /> <Code code={tableCode} lang="html" />

6
site/src/content/docs/components/buttons.mdx
View File

@ -200,9 +200,9 @@ Each `.btn-*` modifier class updates the appropriate CSS variables to minimize a
Here’s an example of building a custom `.btn-*` modifier class as we do for the buttons unique to our docs by reassigning Bootstrap’s CSS variables with a mixture of our own CSS and Sass variables. Here’s an example of building a custom `.btn-*` modifier class as we do for the buttons unique to our docs by reassigning Bootstrap’s CSS variables with a mixture of our own CSS and Sass variables.
<div class="bd-example"> <Example showMarkup={false} code={`
<button type="button" class="btn btn-bd-primary">Custom button</button> <button type="button" class="btn btn-bd-primary">Custom button</button>
</div> `} />
<ScssDocs name="btn-css-vars-example" file="site/src/scss/_buttons.scss" /> <ScssDocs name="btn-css-vars-example" file="site/src/scss/_buttons.scss" />

28
site/src/content/docs/components/modal.mdx
View File

@ -100,9 +100,9 @@ Toggle a working modal demo by clicking the button below. It will slide down and
</div> </div>
</div> </div>
<div class="bd-example"> <Example showMarkup={false} code={`
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLive">Launch demo modal</button> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLive">Launch demo modal</button>
</div> `} />
```html ```html
<!-- Button trigger modal --> <!-- Button trigger modal -->
@ -152,9 +152,9 @@ When backdrop is set to static, the modal will not close when clicking outside o
</div> </div>
</div> </div>
<div class="bd-example"> <Example showMarkup={false} code={`
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdropLive">Launch static backdrop modal</button> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdropLive">Launch static backdrop modal</button>
</div> `} />
```html ```html
<!-- Button trigger modal --> <!-- Button trigger modal -->
@ -204,9 +204,9 @@ When modals become too long for the user’s viewport or device, they scroll ind
</div> </div>
</div> </div>
<div class="bd-example"> <Example showMarkup={false} code={`
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLong">Launch demo modal</button> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLong">Launch demo modal</button>
</div> `} />
You can also create a scrollable modal that allows scrolling the modal body by adding `.modal-dialog-scrollable` to `.modal-dialog`. You can also create a scrollable modal that allows scrolling the modal body by adding `.modal-dialog-scrollable` to `.modal-dialog`.
@ -230,9 +230,9 @@ You can also create a scrollable modal that allows scrolling the modal body by a
</div> </div>
</div> </div>
<div class="bd-example"> <Example showMarkup={false} code={`
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalScrollable">Launch demo modal</button> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalScrollable">Launch demo modal</button>
</div> `} />
```html ```html
<!-- Scrollable modal --> <!-- Scrollable modal -->
@ -383,9 +383,9 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w
</div> </div>
</div> </div>
<div class="bd-example"> <Example showMarkup={false} code={`
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#gridSystemModal">Launch demo modal</button> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#gridSystemModal">Launch demo modal</button>
</div> `} />
```html ```html
<div class="modal-body"> <div class="modal-body">

16
site/src/content/docs/components/navbar.mdx
View File

@ -302,8 +302,8 @@ Mix and match with other components and utilities as needed.
Navbar themes are easier than ever thanks to Bootstrap’s combination of Sass and CSS variables. The default is our “light navbar” for use with light background colors, but you can also apply `data-bs-theme="dark"` to the `.navbar` parent for dark background colors. Then, customize with `.bg-*` and additional utilities. Navbar themes are easier than ever thanks to Bootstrap’s combination of Sass and CSS variables. The default is our “light navbar” for use with light background colors, but you can also apply `data-bs-theme="dark"` to the `.navbar` parent for dark background colors. Then, customize with `.bg-*` and additional utilities.
<div class="bd-example"> <Example showMarkup={false} code={`
<nav class="navbar navbar-expand-lg bg-dark border-bottom border-body" data-bs-theme="dark"> <nav class="navbar navbar-expand-lg bg-dark border-bottom border-body" data-bs-theme="dark">
<div class="container-fluid"> <div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
@ -330,9 +330,9 @@ Navbar themes are easier than ever thanks to Bootstrap’s combination of Sass a
</form> </form>
</div> </div>
</div> </div>
</nav> </nav>
<nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark"> <nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
<div class="container-fluid"> <div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
@ -359,9 +359,9 @@ Navbar themes are easier than ever thanks to Bootstrap’s combination of Sass a
</form> </form>
</div> </div>
</div> </div>
</nav> </nav>
<nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;" data-bs-theme="light"> <nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;" data-bs-theme="light">
<div class="container-fluid"> <div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
@ -388,8 +388,8 @@ Navbar themes are easier than ever thanks to Bootstrap’s combination of Sass a
</form> </form>
</div> </div>
</div> </div>
</nav> </nav>
</div> `} />
```html ```html
<nav class="navbar bg-dark border-bottom border-body" data-bs-theme="dark"> <nav class="navbar bg-dark border-bottom border-body" data-bs-theme="dark">

36
site/src/content/docs/components/navs-tabs.mdx
View File

@ -325,8 +325,8 @@ On the `.nav-underline` modifier class:
Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content. Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content.
<div class="bd-example"> <Example showMarkup={false} code={`
<ul class="nav nav-tabs mb-3" id="myTab" role="tablist"> <ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button> <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
</li> </li>
@ -339,8 +339,8 @@ Use the tab JavaScript plugin—include it individually or through the compiled
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button> <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
</li> </li>
</ul> </ul>
<div class="tab-content" id="myTabContent"> <div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0"> <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
<p>This is some placeholder content the <strong>Home tab’s</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p> <p>This is some placeholder content the <strong>Home tab’s</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
</div> </div>
@ -353,8 +353,8 @@ Use the tab JavaScript plugin—include it individually or through the compiled
<div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0"> <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">
<p>This is some placeholder content the <strong>Disabled tab’s</strong> associated content.</p> <p>This is some placeholder content the <strong>Disabled tab’s</strong> associated content.</p>
</div> </div>
</div>
</div> </div>
`} />
```html ```html
<ul class="nav nav-tabs" id="myTab" role="tablist"> <ul class="nav nav-tabs" id="myTab" role="tablist">
@ -381,16 +381,16 @@ Use the tab JavaScript plugin—include it individually or through the compiled
To help fit your needs, this works with `<ul>`-based markup, as shown above, or with any arbitrary “roll your own” markup. Note that if you’re using `<nav>`, you shouldn’t add `role="tablist"` directly to it, as this would override the element’s native role as a navigation landmark. Instead, switch to an alternative element (in the example below, a simple `<div>`) and wrap the `<nav>` around it. To help fit your needs, this works with `<ul>`-based markup, as shown above, or with any arbitrary “roll your own” markup. Note that if you’re using `<nav>`, you shouldn’t add `role="tablist"` directly to it, as this would override the element’s native role as a navigation landmark. Instead, switch to an alternative element (in the example below, a simple `<div>`) and wrap the `<nav>` around it.
<div class="bd-example"> <Example showMarkup={false} code={`
<nav> <nav>
<div class="nav nav-tabs mb-3" id="nav-tab" role="tablist"> <div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button> <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
<button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button> <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button> <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
<button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</button> <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</button>
</div> </div>
</nav> </nav>
<div class="tab-content" id="nav-tabContent"> <div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">
<p>This is some placeholder content the <strong>Home tab’s</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p> <p>This is some placeholder content the <strong>Home tab’s</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
</div> </div>
@ -403,8 +403,8 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or
<div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0"> <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">
<p>This is some placeholder content the <strong>Disabled tab’s</strong> associated content.</p> <p>This is some placeholder content the <strong>Disabled tab’s</strong> associated content.</p>
</div> </div>
</div>
</div> </div>
`} />
```html ```html
<nav> <nav>
@ -425,8 +425,8 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or
The tabs plugin also works with pills. The tabs plugin also works with pills.
<div class="bd-example"> <Example showMarkup={false} code={`
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button> <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li> </li>
@ -439,8 +439,8 @@ The tabs plugin also works with pills.
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button> <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button>
</li> </li>
</ul> </ul>
<div class="tab-content" id="pills-tabContent"> <div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0"> <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
<p>This is some placeholder content the <strong>Home tab’s</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p> <p>This is some placeholder content the <strong>Home tab’s</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
</div> </div>
@ -453,8 +453,8 @@ The tabs plugin also works with pills.
<div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0"> <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">
<p>This is some placeholder content the <strong>Disabled tab’s</strong> associated content.</p> <p>This is some placeholder content the <strong>Disabled tab’s</strong> associated content.</p>
</div> </div>
</div>
</div> </div>
`} />
```html ```html
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
@ -481,8 +481,8 @@ The tabs plugin also works with pills.
And with vertical pills. Ideally, for vertical tabs, you should also add `aria-orientation="vertical"` to the tab list container. And with vertical pills. Ideally, for vertical tabs, you should also add `aria-orientation="vertical"` to the tab list container.
<div class="bd-example"> <Example showMarkup={false} code={`
<div class="d-flex align-items-start"> <div class="d-flex align-items-start">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical"> <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button> <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
<button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button> <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
@ -507,8 +507,8 @@ And with vertical pills. Ideally, for vertical tabs, you should also add `aria-o
<p>This is some placeholder content the <strong>Settings tab’s</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p> <p>This is some placeholder content the <strong>Settings tab’s</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
</div> </div>
</div> </div>
</div>
</div> </div>
`} />
```html ```html
<div class="d-flex align-items-start"> <div class="d-flex align-items-start">

18
site/src/content/docs/components/scrollspy.mdx
View File

@ -94,8 +94,8 @@ Scroll the area below the navbar and watch the active class change. Open the dro
Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its parents will also be `.active`. Scroll the area next to the navbar and watch the active class change. Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its parents will also be `.active`. Scroll the area next to the navbar and watch the active class change.
<div class="bd-example"> <Example showMarkup={false} code={`
<div class="row"> <div class="row">
<div class="col-4"> <div class="col-4">
<nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end"> <nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
<nav class="nav nav-pills flex-column"> <nav class="nav nav-pills flex-column">
@ -152,8 +152,8 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
`} />
```html ```html
<div class="row"> <div class="row">
@ -214,8 +214,8 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
Scrollspy also works with `.list-group`s. Scroll the area next to the list group and watch the active class change. Scrollspy also works with `.list-group`s. Scroll the area next to the list group and watch the active class change.
<div class="bd-example"> <Example showMarkup={false} code={`
<div class="row"> <div class="row">
<div class="col-4"> <div class="col-4">
<div id="list-example" class="list-group"> <div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a> <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
@ -236,8 +236,8 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
</div> </div>
</div> </div>
</div>
</div> </div>
`} />
```html ```html
<div class="row"> <div class="row">
@ -268,8 +268,8 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group
Scrollspy is not limited to nav components and list groups, so it will work on any `<a>` anchor elements in the current document. Scroll the area and watch the `.active` class change. Scrollspy is not limited to nav components and list groups, so it will work on any `<a>` anchor elements in the current document. Scroll the area and watch the `.active` class change.
<div class="bd-example"> <Example showMarkup={false} code={`
<div class="row"> <div class="row">
<div class="col-4"> <div class="col-4">
<div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center"> <div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center">
<a class="p-1 rounded" href="#simple-list-item-1">Item 1</a> <a class="p-1 rounded" href="#simple-list-item-1">Item 1</a>
@ -293,8 +293,8 @@ Scrollspy is not limited to nav components and list groups, so it will work on a
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p> <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
</div> </div>
</div> </div>
</div>
</div> </div>
`} />
```html ```html
<div class="row"> <div class="row">

6
site/src/content/docs/components/toasts.mdx
View File

@ -57,9 +57,9 @@ Click the button below to show a toast (positioned with our utilities in the low
</div> </div>
</div> </div>
<div class="bd-example"> <Example showMarkup={false} code={`
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button> <button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
</div> `} />
```html ```html
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button> <button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

26
site/src/content/docs/content/reboot.mdx
View File

@ -147,8 +147,8 @@ All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `
For simpler styling, clear hierarchy, and better spacing, description lists have updated `margin`s. `<dd>`s reset `margin-left` to `0` and add `margin-bottom: .5rem`. `<dt>`s are **bolded**. For simpler styling, clear hierarchy, and better spacing, description lists have updated `margin`s. `<dd>`s reset `margin-left` to `0` and add `margin-bottom: .5rem`. `<dt>`s are **bolded**.
<div class="bd-example"> <Example showMarkup={false} code={`
<dl> <dl>
<dt>Description lists</dt> <dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd> <dd>A description list is perfect for defining terms.</dd>
<dt>Term</dt> <dt>Term</dt>
@ -156,8 +156,8 @@ For simpler styling, clear hierarchy, and better spacing, description lists have
<dd>A second definition for the same term.</dd> <dd>A second definition for the same term.</dd>
<dt>Another term</dt> <dt>Another term</dt>
<dd>Definition for this other term.</dd> <dd>Definition for this other term.</dd>
</dl> </dl>
</div> `} />
## Inline code ## Inline code
@ -408,25 +408,25 @@ The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem
The `<abbr>` element receives basic styling to make it stand out amongst paragraph text. The `<abbr>` element receives basic styling to make it stand out amongst paragraph text.
<div class="bd-example"> <Example showMarkup={false} code={`
The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element. The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element.
</div> `} />
### Summary ### Summary
The default `cursor` on summary is `text`, so we reset that to `pointer` to convey that the element can be interacted with by clicking on it. The default `cursor` on summary is `text`, so we reset that to `pointer` to convey that the element can be interacted with by clicking on it.
<div class="bd-example"> <Example showMarkup={false} code={`
<details> <details>
<summary>Some details</summary> <summary>Some details</summary>
<p>More info about the details.</p> <p>More info about the details.</p>
</details> </details>
<details open> <details open>
<summary>Even more details</summary> <summary>Even more details</summary>
<p>Here are even more details about the details.</p> <p>Here are even more details about the details.</p>
</details> </details>
</div> `} />
## HTML5 `[hidden]` attribute ## HTML5 `[hidden]` attribute

44
site/src/content/docs/content/tables.mdx
View File

@ -105,8 +105,8 @@ These hoverable rows can also be combined with the striped rows variant:
Highlight a table row or cell by adding a `.table-active` class. Highlight a table row or cell by adding a `.table-active` class.
<div class="bd-example"> <Example showMarkup={false} code={`
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
<th scope="col">#</th> <th scope="col">#</th>
@ -135,8 +135,8 @@ Highlight a table row or cell by adding a `.table-active` class.
<td class="table-active">@social</td> <td class="table-active">@social</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> `} />
```html ```html
<table class="table"> <table class="table">
@ -160,8 +160,8 @@ Highlight a table row or cell by adding a `.table-active` class.
</table> </table>
``` ```
<div class="bd-example"> <Example showMarkup={false} code={`
<table class="table table-dark"> <table class="table table-dark">
<thead> <thead>
<tr> <tr>
<th scope="col">#</th> <th scope="col">#</th>
@ -190,8 +190,8 @@ Highlight a table row or cell by adding a `.table-active` class.
<td class="table-active">@social</td> <td class="table-active">@social</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> `} />
```html ```html
<table class="table table-dark"> <table class="table table-dark">
@ -296,8 +296,8 @@ Add a thicker border, darker between table groups—`<thead>`, `<tbody>`, and `<
Table cells of `<thead>` are always vertical aligned to the bottom. Table cells in `<tbody>` inherit their alignment from `<table>` and are aligned to the top by default. Use the [vertical align]([[docsref:/utilities/vertical-align]]) classes to re-align where needed. Table cells of `<thead>` are always vertical aligned to the bottom. Table cells in `<tbody>` inherit their alignment from `<table>` and are aligned to the top by default. Use the [vertical align]([[docsref:/utilities/vertical-align]]) classes to re-align where needed.
<div class="bd-example"> <Example showMarkup={false} code={`
<div class="table-responsive"> <div class="table-responsive">
<table class="table align-middle"> <table class="table align-middle">
<thead> <thead>
<tr> <tr>
@ -328,8 +328,8 @@ Table cells of `<thead>` are always vertical aligned to the bottom. Table cells
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
`} />
```html ```html
<div class="table-responsive"> <div class="table-responsive">
@ -361,7 +361,7 @@ Table cells of `<thead>` are always vertical aligned to the bottom. Table cells
Border styles, active styles, and table variants are not inherited by nested tables. Border styles, active styles, and table variants are not inherited by nested tables.
<div class="bd-example"> <Example showMarkup={false} code={`
<table class="table table-striped table-bordered"> <table class="table table-striped table-bordered">
<thead> <thead>
<tr> <tr>
@ -416,7 +416,7 @@ Border styles, active styles, and table variants are not inherited by nested tab
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> `} />
```html ```html
<table class="table table-striped table-bordered"> <table class="table table-striped table-bordered">
@ -449,7 +449,7 @@ Note that if you add `<tr>`s as direct children of a table, those `<tr>` will be
Similar to tables and dark tables, use the modifier classes `.table-light` or `.table-dark` to make `<thead>`s appear light or dark gray. Similar to tables and dark tables, use the modifier classes `.table-light` or `.table-dark` to make `<thead>`s appear light or dark gray.
<div class="bd-example"> <Example showMarkup={false} code={`
<table class="table"> <table class="table">
<thead class="table-light"> <thead class="table-light">
<tr> <tr>
@ -480,7 +480,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> `} />
```html ```html
<table class="table"> <table class="table">
@ -493,7 +493,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
</table> </table>
``` ```
<div class="bd-example"> <Example showMarkup={false} code={`
<table class="table"> <table class="table">
<thead class="table-dark"> <thead class="table-dark">
<tr> <tr>
@ -524,7 +524,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> `} />
```html ```html
<table class="table"> <table class="table">
@ -539,7 +539,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
### Table foot ### Table foot
<div class="bd-example"> <Example showMarkup={false} code={`
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
@ -578,7 +578,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
</div> `} />
```html ```html
<table class="table"> <table class="table">
@ -665,8 +665,8 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
Across every breakpoint, use `.table-responsive` for horizontally scrolling tables. Across every breakpoint, use `.table-responsive` for horizontally scrolling tables.
<div class="bd-example"> <Example showMarkup={false} code={`
<div class="table-responsive"> <div class="table-responsive">
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
@ -721,8 +721,8 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
`} />
```html ```html
<div class="table-responsive"> <div class="table-responsive">

16
site/src/content/docs/content/typography.mdx
View File

@ -62,14 +62,14 @@ Use the included utility classes to recreate the small secondary heading text fr
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style. Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style.
<div class="bd-example"> <Example showMarkup={false} code={`
<div class="display-1 pb-3 mb-3 border-bottom">Display 1</div> <div class="display-1 pb-3 mb-3 border-bottom">Display 1</div>
<div class="display-2 pb-3 mb-3 border-bottom">Display 2</div> <div class="display-2 pb-3 mb-3 border-bottom">Display 2</div>
<div class="display-3 pb-3 mb-3 border-bottom">Display 3</div> <div class="display-3 pb-3 mb-3 border-bottom">Display 3</div>
<div class="display-4 pb-3 mb-3 border-bottom">Display 4</div> <div class="display-4 pb-3 mb-3 border-bottom">Display 4</div>
<div class="display-5 pb-3 mb-3 border-bottom">Display 5</div> <div class="display-5 pb-3 mb-3 border-bottom">Display 5</div>
<div class="display-6">Display 6</div> <div class="display-6">Display 6</div>
</div> `} />
```html ```html
<h1 class="display-1">Display 1</h1> <h1 class="display-1">Display 1</h1>

6
site/src/content/docs/customize/components.mdx
View File

@ -38,11 +38,11 @@ For more information and examples on how to modify our Sass maps and variables,
We encourage you to adopt these guidelines when building with Bootstrap to create your own components. We’ve extended this approach ourselves to the custom components in our documentation and examples. Components like our callouts are built just like our provided components with base and modifier classes. We encourage you to adopt these guidelines when building with Bootstrap to create your own components. We’ve extended this approach ourselves to the custom components in our documentation and examples. Components like our callouts are built just like our provided components with base and modifier classes.
<div class="bd-example"> <Example showMarkup={false} code={`
<div class="bd-callout my-0"> <div class="bd-callout my-0">
<strong>This is a callout.</strong> We built it custom for our docs so our messages to you stand out. It has three variants via modifier classes. <strong>This is a callout.</strong> We built it custom for our docs so our messages to you stand out. It has three variants via modifier classes.
</div>
</div> </div>
`} />
```html ```html
<div class="callout">...</div> <div class="callout">...</div>

4
site/src/content/docs/docsref.mdx
View File

@ -34,9 +34,7 @@ robots: noindex,follow
} }
``` ```
<div class="bd-example"> <Example showMarkup={false} code={`The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element.`} />
The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element.
</div>
<Example code={`<div class="test">This is a test.</div>`} /> <Example code={`<div class="test">This is a test.</div>`} />