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

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

@ -1418,41 +1418,41 @@ 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">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#fat"><bdi lang="en" dir="ltr">@fat</bdi></a> <a class="nav-link" href="#fat"><bdi lang="en" dir="ltr">@fat</bdi></a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#mdo"><bdi lang="en" dir="ltr">@mdo</bdi></a> <a class="nav-link" href="#mdo"><bdi lang="en" dir="ltr">@mdo</bdi></a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">قائمة منسدلة</a> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">قائمة منسدلة</a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#one">واحد</a></li> <li><a class="dropdown-item" href="#one">واحد</a></li>
<li><a class="dropdown-item" href="#two">اثنان</a></li> <li><a class="dropdown-item" href="#two">اثنان</a></li>
<li><hr class="dropdown-divider"></li> <li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#three">ثلاثة</a></li> <li><a class="dropdown-item" href="#three">ثلاثة</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
</nav> </nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example position-relative mt-2 overflow-auto"> <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example position-relative mt-2 overflow-auto">
<h4 id="fat"><bdi lang="en" dir="ltr">@fat</bdi></h4> <h4 id="fat"><bdi lang="en" dir="ltr">@fat</bdi></h4>
<p>محتوى لتوضيح كيف تعمل المخطوطة. ببساطة، المخطوطة عبارة عن منشور طويل يحتوي على عدة أقسام، ولديه شريط تنقل يسهل الوصول إلى هذه الأقسام الفرعية.</p> <p>محتوى لتوضيح كيف تعمل المخطوطة. ببساطة، المخطوطة عبارة عن منشور طويل يحتوي على عدة أقسام، ولديه شريط تنقل يسهل الوصول إلى هذه الأقسام الفرعية.</p>
<h4 id="mdo"><bdi lang="en" dir="ltr">@mdo</bdi></h4> <h4 id="mdo"><bdi lang="en" dir="ltr">@mdo</bdi></h4>
<p>بصرف النظر عن تحسيننا جدوى المكيّفات أو عدم تحسينها، فإن الطلب على الطاقة سيزداد. وطبقاً لما جاء في مقالة معهد ماساشوستس للتكنولوجيا، السالف ذكره، ثمَّة أمر يجب عدم إغفاله، وهو كيف أن هذا الطلب سيضغط على نظم توفير الطاقة الحالية. إذ لا بد من إعادة تأهيل كل شبكات الكهرباء، وتوسيعها لتلبية طلب الطاقة في زمن الذروة، خلال موجات الحرارة المتزايدة. فحين يكون الحر شديداً يجنح الناس إلى البقاء في الداخل، وإلى زيادة تشغيل المكيّفات، سعياً إلى جو لطيف وهم يستخدمون أدوات وأجهزة مختلفة أخرى.</p> <p>بصرف النظر عن تحسيننا جدوى المكيّفات أو عدم تحسينها، فإن الطلب على الطاقة سيزداد. وطبقاً لما جاء في مقالة معهد ماساشوستس للتكنولوجيا، السالف ذكره، ثمَّة أمر يجب عدم إغفاله، وهو كيف أن هذا الطلب سيضغط على نظم توفير الطاقة الحالية. إذ لا بد من إعادة تأهيل كل شبكات الكهرباء، وتوسيعها لتلبية طلب الطاقة في زمن الذروة، خلال موجات الحرارة المتزايدة. فحين يكون الحر شديداً يجنح الناس إلى البقاء في الداخل، وإلى زيادة تشغيل المكيّفات، سعياً إلى جو لطيف وهم يستخدمون أدوات وأجهزة مختلفة أخرى.</p>
<h4 id="one">واحد</h4> <h4 id="one">واحد</h4>
<p>وكل هذه الأمور المتزامنة من تشغيل الأجهزة، يزيد الضغط على شبكات الطاقة، كما أسلفنا. لكن مجرد زيادة سعة الشبكة ليس كافياً. إذ لا بد من تطوير الشبكات الذكية التي تستخدم الجسّاسات، ونظم المراقبة، والبرامج الإلكترونية، لتحديد متى يكون الشاغلون في المبنى، ومتى يكون ثمَّة حاجة إلى الطاقة، ومتى تكون الحرارة منخفضة، وبذلك يخرج الناس، فلا يستخدمون كثيراً من الكهرباء.</p> <p>وكل هذه الأمور المتزامنة من تشغيل الأجهزة، يزيد الضغط على شبكات الطاقة، كما أسلفنا. لكن مجرد زيادة سعة الشبكة ليس كافياً. إذ لا بد من تطوير الشبكات الذكية التي تستخدم الجسّاسات، ونظم المراقبة، والبرامج الإلكترونية، لتحديد متى يكون الشاغلون في المبنى، ومتى يكون ثمَّة حاجة إلى الطاقة، ومتى تكون الحرارة منخفضة، وبذلك يخرج الناس، فلا يستخدمون كثيراً من الكهرباء.</p>
<h4 id="two">اثنان</h4> <h4 id="two">اثنان</h4>
<p>مع الأسف، كل هذه الحلول المبتكرة مكلِّفة، وهذا ما يجعلها عديمة الجدوى في نظر بعض الشركات الخاصة والمواطن المتقشّف. إن بعض الأفراد الواعين بيئياً يبذلون قصارى جهدهم في تقليص استهلاكهم من الطاقة، ويعون جيداً أهمية أجهزة التكييف المجدية والأرفق بالبيئة. ولكن جهات كثيرة لن تتحرّك لمجرد حافز سلامة المناخ ووقف هدر الطاقة، ما دامت لا تحركها حوافز قانونية. وعلى الحكومات أن تُقدِم عند الاهتمام بالتغيّر المناخي، على وضع التشريعات المناسبة. فبالنظم والحوافز والدعم، يمكن دفع الشركات إلى اعتماد الحلول الأجدى في مكاتبها.</p> <p>مع الأسف، كل هذه الحلول المبتكرة مكلِّفة، وهذا ما يجعلها عديمة الجدوى في نظر بعض الشركات الخاصة والمواطن المتقشّف. إن بعض الأفراد الواعين بيئياً يبذلون قصارى جهدهم في تقليص استهلاكهم من الطاقة، ويعون جيداً أهمية أجهزة التكييف المجدية والأرفق بالبيئة. ولكن جهات كثيرة لن تتحرّك لمجرد حافز سلامة المناخ ووقف هدر الطاقة، ما دامت لا تحركها حوافز قانونية. وعلى الحكومات أن تُقدِم عند الاهتمام بالتغيّر المناخي، على وضع التشريعات المناسبة. فبالنظم والحوافز والدعم، يمكن دفع الشركات إلى اعتماد الحلول الأجدى في مكاتبها.</p>
<h4 id="three">ثلاثة</h4> <h4 id="three">ثلاثة</h4>
<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">

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

@ -1223,7 +1223,7 @@ export const body_class = 'bg-body-tertiary'
</div> </div>
</div> </div>
</nav> </nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary mt-5"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary mt-5">
<div class="container-fluid"> <div class="container-fluid">
<a class="navbar-brand" href="#"> <a class="navbar-brand" href="#">
@ -1394,40 +1394,40 @@ 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">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" href="#scrollspyHeading1">First</a> <a class="nav-link active" href="#scrollspyHeading1">First</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">Second</a> <a class="nav-link" href="#scrollspyHeading2">Second</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li> <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
<li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li> <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
<li><hr class="dropdown-divider"></li> <li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li> <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
</nav> </nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example position-relative mt-2 overflow-auto" tabindex="0"> <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example position-relative mt-2 overflow-auto" tabindex="0">
<h4 id="scrollspyHeading1">First heading</h4> <h4 id="scrollspyHeading1">First 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>
<h4 id="scrollspyHeading2">Second heading</h4> <h4 id="scrollspyHeading2">Second 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>
<h4 id="scrollspyHeading3">Third heading</h4> <h4 id="scrollspyHeading3">Third 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>
<h4 id="scrollspyHeading4">Fourth heading</h4> <h4 id="scrollspyHeading4">Fourth 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>
<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">

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

@ -302,94 +302,94 @@ 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">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarColor01"> <div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav me-auto mb-2 mb-lg-0"> <ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a> <a class="nav-link active" aria-current="page" href="#">Home</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Features</a> <a class="nav-link" href="#">Features</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Pricing</a> <a class="nav-link" href="#">Pricing</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">About</a> <a class="nav-link" href="#">About</a>
</li> </li>
</ul> </ul>
<form class="d-flex" role="search"> <form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
<button class="btn btn-outline-light" type="submit">Search</button> <button class="btn btn-outline-light" type="submit">Search</button>
</form> </form>
</div>
</div> </div>
</nav> </div>
</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">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarColor02"> <div class="collapse navbar-collapse" id="navbarColor02">
<ul class="navbar-nav me-auto mb-2 mb-lg-0"> <ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a> <a class="nav-link active" aria-current="page" href="#">Home</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Features</a> <a class="nav-link" href="#">Features</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Pricing</a> <a class="nav-link" href="#">Pricing</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">About</a> <a class="nav-link" href="#">About</a>
</li> </li>
</ul> </ul>
<form class="d-flex" role="search"> <form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
<button class="btn btn-outline-light" type="submit">Search</button> <button class="btn btn-outline-light" type="submit">Search</button>
</form> </form>
</div>
</div> </div>
</nav> </div>
</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">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarColor03"> <div class="collapse navbar-collapse" id="navbarColor03">
<ul class="navbar-nav me-auto mb-2 mb-lg-0"> <ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a> <a class="nav-link active" aria-current="page" href="#">Home</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Features</a> <a class="nav-link" href="#">Features</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Pricing</a> <a class="nav-link" href="#">Pricing</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">About</a> <a class="nav-link" href="#">About</a>
</li> </li>
</ul> </ul>
<form class="d-flex" role="search"> <form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
<button class="btn btn-outline-primary" type="submit">Search</button> <button class="btn btn-outline-primary" type="submit">Search</button>
</form> </form>
</div>
</div> </div>
</nav> </div>
</div> </nav>
`} />
```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">

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

@ -325,36 +325,36 @@ 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>
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button> <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
</li> </li>
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button> <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
</li> </li>
<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>
<div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0"> <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
<p>This is some placeholder content the <strong>Profile 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>Profile 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 class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0"> <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
<p>This is some placeholder content the <strong>Contact 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>Contact 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 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,30 +381,30 @@ 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>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0"> <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">
<p>This is some placeholder content the <strong>Profile 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>Profile 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 class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0"> <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">
<p>This is some placeholder content the <strong>Contact 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>Contact 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 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,36 +425,36 @@ 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>
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button> <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li> </li>
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button> <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li> </li>
<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>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0"> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
<p>This is some placeholder content the <strong>Profile 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>Profile 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 class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0"> <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">
<p>This is some placeholder content the <strong>Contact 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>Contact 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 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,34 +481,34 @@ 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>
<button class="nav-link" id="v-pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</button> <button class="nav-link" id="v-pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</button>
<button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button> <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
<button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button> <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-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>
</div> </div>
<div class="tab-content" id="v-pills-tabContent"> <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" tabindex="0"> <p>This is some placeholder content the <strong>Profile 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> <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-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>Profile 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 class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">
<div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0"> <p>This is some placeholder content the <strong>Messages 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>Disabled tab’s</strong> associated content.</p> </div>
</div> <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0"> <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>Messages 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 class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">
<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">

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

@ -94,66 +94,66 @@ 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">
<a class="nav-link" href="#item-1">Item 1</a>
<nav class="nav nav-pills flex-column"> <nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a> <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
<nav class="nav nav-pills flex-column"> <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a> </nav>
<a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a> <a class="nav-link" href="#item-2">Item 2</a>
</nav> <a class="nav-link" href="#item-3">Item 3</a>
<a class="nav-link" href="#item-2">Item 2</a> <nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-3">Item 3</a> <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
<nav class="nav nav-pills flex-column"> <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
<a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
<a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
</nav>
</nav> </nav>
</nav> </nav>
</div> </nav>
<div class="col-8"> </div>
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0"> <div class="col-8">
<div id="item-1"> <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
<h4>Item 1</h4> <div id="item-1">
<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> <h4>Item 1</h4>
<p>Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</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> <p>Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
<div id="item-1-1"> </div>
<h5>Item 1-1</h5> <div id="item-1-1">
<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> <h5>Item 1-1</h5>
<p>Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</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> <p>Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
<div id="item-1-2"> </div>
<h5>Item 1-2</h5> <div id="item-1-2">
<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> <h5>Item 1-2</h5>
<p>Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</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> <p>Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
<div id="item-2"> </div>
<h4>Item 2</h4> <div id="item-2">
<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> <h4>Item 2</h4>
<p>Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</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> <p>Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
<div id="item-3"> </div>
<h4>Item 3</h4> <div id="item-3">
<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> <h4>Item 3</h4>
<p>Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</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> <p>Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
<div id="item-3-1"> </div>
<h5>Item 3-1</h5> <div id="item-3-1">
<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> <h5>Item 3-1</h5>
<p>Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</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> <p>Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
<div id="item-3-2"> </div>
<h5>Item 3-2</h5> <div id="item-3-2">
<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> <h5>Item 3-2</h5>
<p>Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</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> <p>Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
`} />
```html ```html
<div class="row"> <div class="row">
@ -214,30 +214,30 @@ 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>
<a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a> <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a> <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
<a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a> <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
</div> </div>
<div class="col-8"> </div>
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0"> <div class="col-8">
<h4 id="list-item-1">Item 1</h4> <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
<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> <h4 id="list-item-1">Item 1</h4>
<h4 id="list-item-2">Item 2</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> <h4 id="list-item-2">Item 2</h4>
<h4 id="list-item-3">Item 3</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> <h4 id="list-item-3">Item 3</h4>
<h4 id="list-item-4">Item 4</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> <h4 id="list-item-4">Item 4</h4>
</div> <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>
`} />
```html ```html
<div class="row"> <div class="row">
@ -268,33 +268,33 @@ 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>
<a class="p-1 rounded" href="#simple-list-item-2">Item 2</a> <a class="p-1 rounded" href="#simple-list-item-2">Item 2</a>
<a class="p-1 rounded" href="#simple-list-item-3">Item 3</a> <a class="p-1 rounded" href="#simple-list-item-3">Item 3</a>
<a class="p-1 rounded" href="#simple-list-item-4">Item 4</a> <a class="p-1 rounded" href="#simple-list-item-4">Item 4</a>
<a class="p-1 rounded" href="#simple-list-item-5">Item 5</a> <a class="p-1 rounded" href="#simple-list-item-5">Item 5</a>
</div>
</div> </div>
<div class="col-8"> </div>
<div data-bs-spy="scroll" data-bs-target="#simple-list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0"> <div class="col-8">
<h4 id="simple-list-item-1">Item 1</h4> <div data-bs-spy="scroll" data-bs-target="#simple-list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
<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> <h4 id="simple-list-item-1">Item 1</h4>
<h4 id="simple-list-item-2">Item 2</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> <h4 id="simple-list-item-2">Item 2</h4>
<h4 id="simple-list-item-3">Item 3</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> <h4 id="simple-list-item-3">Item 3</h4>
<h4 id="simple-list-item-4">Item 4</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> <h4 id="simple-list-item-4">Item 4</h4>
<h4 id="simple-list-item-5">Item 5</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> <h4 id="simple-list-item-5">Item 5</h4>
</div> <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>
`} />
```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>

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

@ -147,17 +147,17 @@ 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>
<dd>Definition for the term.</dd> <dd>Definition for the term.</dd>
<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

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

@ -105,38 +105,38 @@ 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>
<th scope="col">First</th> <th scope="col">First</th>
<th scope="col">Last</th> <th scope="col">Last</th>
<th scope="col">Handle</th> <th scope="col">Handle</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr class="table-active"> <tr class="table-active">
<th scope="row">1</th> <th scope="row">1</th>
<td>Mark</td> <td>Mark</td>
<td>Otto</td> <td>Otto</td>
<td>@mdo</td> <td>@mdo</td>
</tr> </tr>
<tr> <tr>
<th scope="row">2</th> <th scope="row">2</th>
<td>Jacob</td> <td>Jacob</td>
<td>Thornton</td> <td>Thornton</td>
<td>@fat</td> <td>@fat</td>
</tr> </tr>
<tr> <tr>
<th scope="row">3</th> <th scope="row">3</th>
<td>John</td> <td>John</td>
<td>Doe</td> <td>Doe</td>
<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,38 +160,38 @@ 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>
<th scope="col">First</th> <th scope="col">First</th>
<th scope="col">Last</th> <th scope="col">Last</th>
<th scope="col">Handle</th> <th scope="col">Handle</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr class="table-active"> <tr class="table-active">
<th scope="row">1</th> <th scope="row">1</th>
<td>Mark</td> <td>Mark</td>
<td>Otto</td> <td>Otto</td>
<td>@mdo</td> <td>@mdo</td>
</tr> </tr>
<tr> <tr>
<th scope="row">2</th> <th scope="row">2</th>
<td>Jacob</td> <td>Jacob</td>
<td>Thornton</td> <td>Thornton</td>
<td>@fat</td> <td>@fat</td>
</tr> </tr>
<tr> <tr>
<th scope="row">3</th> <th scope="row">3</th>
<td>John</td> <td>John</td>
<td>Doe</td> <td>Doe</td>
<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,40 +296,40 @@ 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>
<th scope="col" class="w-25">Heading 1</th> <th scope="col" class="w-25">Heading 1</th>
<th scope="col" class="w-25">Heading 2</th> <th scope="col" class="w-25">Heading 2</th>
<th scope="col" class="w-25">Heading 3</th> <th scope="col" class="w-25">Heading 3</th>
<th scope="col" class="w-25">Heading 4</th> <th scope="col" class="w-25">Heading 4</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>This cell inherits <code>vertical-align: middle;</code> from the table</td> <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
<td>This cell inherits <code>vertical-align: middle;</code> from the table</td> <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
<td>This cell inherits <code>vertical-align: middle;</code> from the table</td> <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
<td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td> <td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td>
</tr> </tr>
<tr class="align-bottom"> <tr class="align-bottom">
<td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td> <td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
<td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td> <td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
<td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td> <td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
<td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td> <td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td>
</tr> </tr>
<tr> <tr>
<td>This cell inherits <code>vertical-align: middle;</code> from the table</td> <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
<td>This cell inherits <code>vertical-align: middle;</code> from the table</td> <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
<td class="align-top">This cell is aligned to the top.</td> <td class="align-top">This cell is aligned to the top.</td>
<td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td> <td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td>
</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,64 +665,64 @@ 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>
<th scope="col">#</th> <th scope="col">#</th>
<th scope="col">Heading</th> <th scope="col">Heading</th>
<th scope="col">Heading</th> <th scope="col">Heading</th>
<th scope="col">Heading</th> <th scope="col">Heading</th>
<th scope="col">Heading</th> <th scope="col">Heading</th>
<th scope="col">Heading</th> <th scope="col">Heading</th>
<th scope="col">Heading</th> <th scope="col">Heading</th>
<th scope="col">Heading</th> <th scope="col">Heading</th>
<th scope="col">Heading</th> <th scope="col">Heading</th>
<th scope="col">Heading</th> <th scope="col">Heading</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<th scope="row">1</th> <th scope="row">1</th>
<td>Cell</td> <td>Cell</td>
<td>Cell</td> <td>Cell</td>
<td>Cell</td> <td>Cell</td>
<td>Cell</td> <td>Cell</td>
<td>Cell</td> <td>Cell</td>
<td>Cell</td> <td>Cell</td>
<td>Cell</td> <td>Cell</td>
<td>Cell</td> <td>Cell</td>
<td>Cell</td> <td>Cell</td>
</tr> </tr>
<tr> <tr>
<th scope="row">2</th> <th scope="row">2</th>
<td>Cell</td> <td>Cell</td>
<td>Cell</td> <td>Cell</td>
<td>Cell</td> <td>Cell</td>
<td>Cell</td> <td>Cell</td>
<td>Cell</td> <td>Cell</td>
<td>Cell</td> <td>Cell</td>
<td>Cell</td> <td>Cell</td>
<td>Cell</td> <td>Cell</td>
<td>Cell</td> <td>Cell</td>
</tr> </tr>
<tr> <tr>
<th scope="row">3</th> <th scope="row">3</th>
<td>Cell</td> <td>Cell</td>
<td>Cell</td> <td>Cell</td>
<td>Cell</td> <td>Cell</td>
<td>Cell</td> <td>Cell</td>
<td>Cell</td> <td>Cell</td>
<td>Cell</td> <td>Cell</td>
<td>Cell</td> <td>Cell</td>
<td>Cell</td> <td>Cell</td>
<td>Cell</td> <td>Cell</td>
</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>

8
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>`} />