</div>
<div>
- <div class="bd-example">
- <nav id="navbar-example2" class="navbar bg-body-tertiary px-3">
- <a class="navbar-brand" href="#">شريط التنقل</a>
- <ul class="nav nav-pills">
- <li class="nav-item">
- <a class="nav-link" href="#fat"><bdi lang="en" dir="ltr">@fat</bdi></a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#mdo"><bdi lang="en" dir="ltr">@mdo</bdi></a>
- </li>
- <li class="nav-item dropdown">
- <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">قائمة منسدلة</a>
- <ul class="dropdown-menu">
- <li><a class="dropdown-item" href="#one">واحد</a></li>
- <li><a class="dropdown-item" href="#two">اثنان</a></li>
- <li><hr class="dropdown-divider"></li>
- <li><a class="dropdown-item" href="#three">ثلاثة</a></li>
- </ul>
- </li>
- </ul>
- </nav>
- <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>
- <p>محتوى لتوضيح كيف تعمل المخطوطة. ببساطة، المخطوطة عبارة عن منشور طويل يحتوي على عدة أقسام، ولديه شريط تنقل يسهل الوصول إلى هذه الأقسام الفرعية.</p>
- <h4 id="mdo"><bdi lang="en" dir="ltr">@mdo</bdi></h4>
- <p>بصرف النظر عن تحسيننا جدوى المكيّفات أو عدم تحسينها، فإن الطلب على الطاقة سيزداد. وطبقاً لما جاء في مقالة معهد ماساشوستس للتكنولوجيا، السالف ذكره، ثمَّة أمر يجب عدم إغفاله، وهو كيف أن هذا الطلب سيضغط على نظم توفير الطاقة الحالية. إذ لا بد من إعادة تأهيل كل شبكات الكهرباء، وتوسيعها لتلبية طلب الطاقة في زمن الذروة، خلال موجات الحرارة المتزايدة. فحين يكون الحر شديداً يجنح الناس إلى البقاء في الداخل، وإلى زيادة تشغيل المكيّفات، سعياً إلى جو لطيف وهم يستخدمون أدوات وأجهزة مختلفة أخرى.</p>
- <h4 id="one">واحد</h4>
- <p>وكل هذه الأمور المتزامنة من تشغيل الأجهزة، يزيد الضغط على شبكات الطاقة، كما أسلفنا. لكن مجرد زيادة سعة الشبكة ليس كافياً. إذ لا بد من تطوير الشبكات الذكية التي تستخدم الجسّاسات، ونظم المراقبة، والبرامج الإلكترونية، لتحديد متى يكون الشاغلون في المبنى، ومتى يكون ثمَّة حاجة إلى الطاقة، ومتى تكون الحرارة منخفضة، وبذلك يخرج الناس، فلا يستخدمون كثيراً من الكهرباء.</p>
- <h4 id="two">اثنان</h4>
- <p>مع الأسف، كل هذه الحلول المبتكرة مكلِّفة، وهذا ما يجعلها عديمة الجدوى في نظر بعض الشركات الخاصة والمواطن المتقشّف. إن بعض الأفراد الواعين بيئياً يبذلون قصارى جهدهم في تقليص استهلاكهم من الطاقة، ويعون جيداً أهمية أجهزة التكييف المجدية والأرفق بالبيئة. ولكن جهات كثيرة لن تتحرّك لمجرد حافز سلامة المناخ ووقف هدر الطاقة، ما دامت لا تحركها حوافز قانونية. وعلى الحكومات أن تُقدِم عند الاهتمام بالتغيّر المناخي، على وضع التشريعات المناسبة. فبالنظم والحوافز والدعم، يمكن دفع الشركات إلى اعتماد الحلول الأجدى في مكاتبها.</p>
- <h4 id="three">ثلاثة</h4>
- <p>وكما يتبيّن لنا، من عدد الحلول الملطِّفة للمشكلة، ومن تنوّعها، وهي الحلول التي أسلفنا الحديث عنها، فإن التكنولوجيا التي نحتاج إليها من أجل معالجة هذه التحديات، هي في مدى قدرتنا، لكنها ربما تتطلّب بعض التحسين، ودعماً استثمارياً أكبر!</p>
- <p>ولا مانع من إضافة محتوى آخر ليس تحت أي قسم معين.</p>
- </div>
+ <Example showMarkup={false} code={`
+ <nav id="navbar-example2" class="navbar bg-body-tertiary px-3">
+ <a class="navbar-brand" href="#">شريط التنقل</a>
+ <ul class="nav nav-pills">
+ <li class="nav-item">
+ <a class="nav-link" href="#fat"><bdi lang="en" dir="ltr">@fat</bdi></a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#mdo"><bdi lang="en" dir="ltr">@mdo</bdi></a>
+ </li>
+ <li class="nav-item dropdown">
+ <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">قائمة منسدلة</a>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#one">واحد</a></li>
+ <li><a class="dropdown-item" href="#two">اثنان</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#three">ثلاثة</a></li>
+ </ul>
+ </li>
+ </ul>
+ </nav>
+ <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>
+ <p>محتوى لتوضيح كيف تعمل المخطوطة. ببساطة، المخطوطة عبارة عن منشور طويل يحتوي على عدة أقسام، ولديه شريط تنقل يسهل الوصول إلى هذه الأقسام الفرعية.</p>
+ <h4 id="mdo"><bdi lang="en" dir="ltr">@mdo</bdi></h4>
+ <p>بصرف النظر عن تحسيننا جدوى المكيّفات أو عدم تحسينها، فإن الطلب على الطاقة سيزداد. وطبقاً لما جاء في مقالة معهد ماساشوستس للتكنولوجيا، السالف ذكره، ثمَّة أمر يجب عدم إغفاله، وهو كيف أن هذا الطلب سيضغط على نظم توفير الطاقة الحالية. إذ لا بد من إعادة تأهيل كل شبكات الكهرباء، وتوسيعها لتلبية طلب الطاقة في زمن الذروة، خلال موجات الحرارة المتزايدة. فحين يكون الحر شديداً يجنح الناس إلى البقاء في الداخل، وإلى زيادة تشغيل المكيّفات، سعياً إلى جو لطيف وهم يستخدمون أدوات وأجهزة مختلفة أخرى.</p>
+ <h4 id="one">واحد</h4>
+ <p>وكل هذه الأمور المتزامنة من تشغيل الأجهزة، يزيد الضغط على شبكات الطاقة، كما أسلفنا. لكن مجرد زيادة سعة الشبكة ليس كافياً. إذ لا بد من تطوير الشبكات الذكية التي تستخدم الجسّاسات، ونظم المراقبة، والبرامج الإلكترونية، لتحديد متى يكون الشاغلون في المبنى، ومتى يكون ثمَّة حاجة إلى الطاقة، ومتى تكون الحرارة منخفضة، وبذلك يخرج الناس، فلا يستخدمون كثيراً من الكهرباء.</p>
+ <h4 id="two">اثنان</h4>
+ <p>مع الأسف، كل هذه الحلول المبتكرة مكلِّفة، وهذا ما يجعلها عديمة الجدوى في نظر بعض الشركات الخاصة والمواطن المتقشّف. إن بعض الأفراد الواعين بيئياً يبذلون قصارى جهدهم في تقليص استهلاكهم من الطاقة، ويعون جيداً أهمية أجهزة التكييف المجدية والأرفق بالبيئة. ولكن جهات كثيرة لن تتحرّك لمجرد حافز سلامة المناخ ووقف هدر الطاقة، ما دامت لا تحركها حوافز قانونية. وعلى الحكومات أن تُقدِم عند الاهتمام بالتغيّر المناخي، على وضع التشريعات المناسبة. فبالنظم والحوافز والدعم، يمكن دفع الشركات إلى اعتماد الحلول الأجدى في مكاتبها.</p>
+ <h4 id="three">ثلاثة</h4>
+ <p>وكما يتبيّن لنا، من عدد الحلول الملطِّفة للمشكلة، ومن تنوّعها، وهي الحلول التي أسلفنا الحديث عنها، فإن التكنولوجيا التي نحتاج إليها من أجل معالجة هذه التحديات، هي في مدى قدرتنا، لكنها ربما تتطلّب بعض التحسين، ودعماً استثمارياً أكبر!</p>
+ <p>ولا مانع من إضافة محتوى آخر ليس تحت أي قسم معين.</p>
</div>
+ `} />
</div>
</article>
<article class="my-3" id="spinners">
</div>
</div>
</nav>
-
+
<nav class="navbar navbar-expand-lg navbar-dark bg-primary mt-5">
<div class="container-fluid">
<a class="navbar-brand" href="#">
</div>
<div>
- <div class="bd-example">
- <nav id="navbar-example2" class="navbar bg-body-tertiary px-3">
-
<a class="navbar-brand" href="#">Navbar</a>
-
<ul class="nav nav-pills">
- <li class="nav-item">
-
<a class="nav-link active" href="#scrollspyHeading1">First</a>
- </li>
- <li class="nav-item">
-
<a class="nav-link" href="#scrollspyHeading2">Second</a>
- </li>
- <li class="nav-item dropdown">
-
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
-
<ul class="dropdown-menu">
-
<li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
-
<li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
- <li><hr class="dropdown-divider"></li>
-
<li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
- </ul>
- </li>
- </ul>
- </nav>
+ <Example showMarkup={false} code={`
+ <nav id="navbar-example2" class="navbar bg-body-tertiary px-3">
+ <a class="navbar-brand" href="#">Navbar</a>
+ <ul class="nav nav-pills">
+ <li class="nav-item">
+ <a class="nav-link active" href="#scrollspyHeading1">First</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#scrollspyHeading2">Second</a>
+ </li>
+ <li class="nav-item dropdown">
+ <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
+ <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
+ </ul>
+ </li>
+ </ul>
+ </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">
- <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>
- <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>
- <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>
- <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>
- <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>
- </div>
+ <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>
+ <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>
+ <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>
+ <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>
+ <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>
</div>
+ `} />
</div>
</article>
<article class="my-3" id="spinners">
---
import Code from '@shortcodes/Code.astro'
+import Example from '@shortcodes/Example.astro'
import * as tableContent from '@shortcodes/TableContent.md'
interface Props {
const tableCode = `<table${className ? ` class="${className}"` : ''}>
${simplified ? ' ...' : await tableContent.compiledContent()}
</table>`
+
+const exampleCode = `<table${className ? ` class="${className}"` : ''}>
+${await tableContent.compiledContent()}
+</table>`
---
-<div class="bd-example">
- <table class={className}>
- <tableContent.Content />
- </table>
-</div>
+<Example showMarkup={false} code={exampleCode} />
<Code code={tableCode} lang="html" />
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">
- <button type="button" class="btn btn-bd-primary">Custom button</button>
-</div>
+<Example showMarkup={false} code={`
+<button type="button" class="btn btn-bd-primary">Custom button</button>
+`} />
<ScssDocs name="btn-css-vars-example" file="site/src/scss/_buttons.scss" />
</div>
</div>
-<div class="bd-example">
- <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLive">Launch demo modal</button>
-</div>
+<Example showMarkup={false} code={`
+<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLive">Launch demo modal</button>
+`} />
```html
<!-- Button trigger modal -->
</div>
</div>
-<div class="bd-example">
- <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdropLive">Launch static backdrop modal</button>
-</div>
+<Example showMarkup={false} code={`
+<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdropLive">Launch static backdrop modal</button>
+`} />
```html
<!-- Button trigger modal -->
</div>
</div>
-<div class="bd-example">
- <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLong">Launch demo modal</button>
-</div>
+<Example showMarkup={false} code={`
+<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLong">Launch demo modal</button>
+`} />
You can also create a scrollable modal that allows scrolling the modal body by adding `.modal-dialog-scrollable` to `.modal-dialog`.
</div>
</div>
-<div class="bd-example">
- <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalScrollable">Launch demo modal</button>
-</div>
+<Example showMarkup={false} code={`
+<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalScrollable">Launch demo modal</button>
+`} />
```html
<!-- Scrollable modal -->
</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>
-</div>
+`} />
```html
<div class="modal-body">
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">
- <nav class="navbar navbar-expand-lg bg-dark border-bottom border-body" data-bs-theme="dark">
- <div class="container-fluid">
- <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">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" id="navbarColor01">
- <ul class="navbar-nav me-auto mb-2 mb-lg-0">
- <li class="nav-item">
- <a class="nav-link active" aria-current="page" href="#">Home</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Features</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Pricing</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">About</a>
- </li>
- </ul>
- <form class="d-flex" role="search">
- <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
- <button class="btn btn-outline-light" type="submit">Search</button>
- </form>
- </div>
+<Example showMarkup={false} code={`
+<nav class="navbar navbar-expand-lg bg-dark border-bottom border-body" data-bs-theme="dark">
+ <div class="container-fluid">
+ <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">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+ <div class="collapse navbar-collapse" id="navbarColor01">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+ <li class="nav-item">
+ <a class="nav-link active" aria-current="page" href="#">Home</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Features</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Pricing</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">About</a>
+ </li>
+ </ul>
+ <form class="d-flex" role="search">
+ <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
+ <button class="btn btn-outline-light" type="submit">Search</button>
+ </form>
</div>
- </nav>
+ </div>
+</nav>
- <nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
- <div class="container-fluid">
- <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">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" id="navbarColor02">
- <ul class="navbar-nav me-auto mb-2 mb-lg-0">
- <li class="nav-item">
- <a class="nav-link active" aria-current="page" href="#">Home</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Features</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Pricing</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">About</a>
- </li>
- </ul>
- <form class="d-flex" role="search">
- <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
- <button class="btn btn-outline-light" type="submit">Search</button>
- </form>
- </div>
+<nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
+ <div class="container-fluid">
+ <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">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+ <div class="collapse navbar-collapse" id="navbarColor02">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+ <li class="nav-item">
+ <a class="nav-link active" aria-current="page" href="#">Home</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Features</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Pricing</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">About</a>
+ </li>
+ </ul>
+ <form class="d-flex" role="search">
+ <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
+ <button class="btn btn-outline-light" type="submit">Search</button>
+ </form>
</div>
- </nav>
+ </div>
+</nav>
- <nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;" data-bs-theme="light">
- <div class="container-fluid">
- <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">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" id="navbarColor03">
- <ul class="navbar-nav me-auto mb-2 mb-lg-0">
- <li class="nav-item">
- <a class="nav-link active" aria-current="page" href="#">Home</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Features</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Pricing</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">About</a>
- </li>
- </ul>
- <form class="d-flex" role="search">
- <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
- <button class="btn btn-outline-primary" type="submit">Search</button>
- </form>
- </div>
+<nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;" data-bs-theme="light">
+ <div class="container-fluid">
+ <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">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+ <div class="collapse navbar-collapse" id="navbarColor03">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+ <li class="nav-item">
+ <a class="nav-link active" aria-current="page" href="#">Home</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Features</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Pricing</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">About</a>
+ </li>
+ </ul>
+ <form class="d-flex" role="search">
+ <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
+ <button class="btn btn-outline-primary" type="submit">Search</button>
+ </form>
</div>
- </nav>
-</div>
+ </div>
+</nav>
+`} />
```html
<nav class="navbar bg-dark border-bottom border-body" data-bs-theme="dark">
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">
- <ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
- <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>
- </li>
- <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>
- </li>
- <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>
- </li>
- <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>
- </li>
- </ul>
- <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">
- <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 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>
- </div>
- <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>
- </div>
- <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>
- </div>
+<Example showMarkup={false} code={`
+<ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
+ <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>
+ </li>
+ <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>
+ </li>
+ <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>
+ </li>
+ <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>
+ </li>
+</ul>
+<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">
+ <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 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>
+ </div>
+ <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>
+ </div>
+ <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>
</div>
</div>
+`} />
```html
<ul class="nav nav-tabs" id="myTab" role="tablist">
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">
- <nav>
- <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" 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-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>
- </nav>
- <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">
- <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 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>
- </div>
- <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>
- </div>
- <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>
- </div>
+<Example showMarkup={false} code={`
+<nav>
+ <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" 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-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>
+</nav>
+<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">
+ <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 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>
+ </div>
+ <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>
+ </div>
+ <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>
</div>
</div>
+`} />
```html
<nav>
The tabs plugin also works with pills.
-<div class="bd-example">
- <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
- <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>
- </li>
- <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>
- </li>
- <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>
- </li>
- <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>
- </li>
- </ul>
- <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">
- <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 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>
- </div>
- <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>
- </div>
- <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>
- </div>
+<Example showMarkup={false} code={`
+<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
+ <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>
+ </li>
+ <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>
+ </li>
+ <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>
+ </li>
+ <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>
+ </li>
+</ul>
+<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">
+ <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 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>
+ </div>
+ <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>
+ </div>
+ <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>
</div>
</div>
+`} />
```html
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
And with vertical pills. Ideally, for vertical tabs, you should also add `aria-orientation="vertical"` to the tab list container.
-<div class="bd-example">
- <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">
- <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-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-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>
+<Example showMarkup={false} code={`
+<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">
+ <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-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-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 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>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 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>Disabled tab’s</strong> associated content.</p>
+ </div>
+ <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>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-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 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>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 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>Disabled tab’s</strong> associated content.</p>
- </div>
- <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>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 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>
+`} />
```html
<div class="d-flex align-items-start">
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">
- <div class="row">
- <div class="col-4">
- <nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
+<Example showMarkup={false} code={`
+<div class="row">
+ <div class="col-4">
+ <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">
+ <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
+ <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
+ </nav>
+ <a class="nav-link" href="#item-2">Item 2</a>
+ <a class="nav-link" href="#item-3">Item 3</a>
<nav class="nav nav-pills flex-column">
- <a class="nav-link" href="#item-1">Item 1</a>
- <nav class="nav nav-pills flex-column">
- <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
- <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
- </nav>
- <a class="nav-link" href="#item-2">Item 2</a>
- <a class="nav-link" href="#item-3">Item 3</a>
- <nav class="nav nav-pills flex-column">
- <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>
+ <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>
- </div>
- <div class="col-8">
- <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
- <div id="item-1">
- <h4>Item 1</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>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 id="item-1-1">
- <h5>Item 1-1</h5>
- <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>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 id="item-1-2">
- <h5>Item 1-2</h5>
- <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>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 id="item-2">
- <h4>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>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 id="item-3">
- <h4>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>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 id="item-3-1">
- <h5>Item 3-1</h5>
- <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>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 id="item-3-2">
- <h5>Item 3-2</h5>
- <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>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>
+ </nav>
+ </div>
+ <div class="col-8">
+ <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
+ <div id="item-1">
+ <h4>Item 1</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>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 id="item-1-1">
+ <h5>Item 1-1</h5>
+ <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>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 id="item-1-2">
+ <h5>Item 1-2</h5>
+ <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>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 id="item-2">
+ <h4>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>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 id="item-3">
+ <h4>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>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 id="item-3-1">
+ <h5>Item 3-1</h5>
+ <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>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 id="item-3-2">
+ <h5>Item 3-2</h5>
+ <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>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>
+`} />
```html
<div class="row">
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">
- <div class="row">
- <div class="col-4">
- <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-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-4">Item 4</a>
- </div>
+<Example showMarkup={false} code={`
+<div class="row">
+ <div class="col-4">
+ <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-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-4">Item 4</a>
</div>
- <div class="col-8">
- <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
- <h4 id="list-item-1">Item 1</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>
- <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>
- <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>
- <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>
- </div>
+ </div>
+ <div class="col-8">
+ <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
+ <h4 id="list-item-1">Item 1</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>
+ <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>
+ <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>
+ <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>
</div>
</div>
</div>
+`} />
```html
<div class="row">
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">
- <div class="row">
- <div class="col-4">
- <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-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-4">Item 4</a>
- <a class="p-1 rounded" href="#simple-list-item-5">Item 5</a>
- </div>
+<Example showMarkup={false} code={`
+<div class="row">
+ <div class="col-4">
+ <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-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-4">Item 4</a>
+ <a class="p-1 rounded" href="#simple-list-item-5">Item 5</a>
</div>
- <div class="col-8">
- <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">
- <h4 id="simple-list-item-1">Item 1</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>
- <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>
- <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>
- <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>
- <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>
- </div>
+ </div>
+ <div class="col-8">
+ <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">
+ <h4 id="simple-list-item-1">Item 1</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>
+ <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>
+ <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>
+ <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>
+ <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>
</div>
</div>
</div>
+`} />
```html
<div class="row">
</div>
</div>
-<div class="bd-example">
- <button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
-</div>
+<Example showMarkup={false} code={`
+<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
+`} />
```html
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
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">
- <dt>Description lists</dt>
- <dd>A description list is perfect for defining terms.</dd>
- <dt>Term</dt>
- <dd>Definition for the term.</dd>
- <dd>A second definition for the same term.</dd>
- <dt>Another term</dt>
- <dd>Definition for this other term.</dd>
- </dl>
-</div>
+<Example showMarkup={false} code={`
+<dl>
+ <dt>Description lists</dt>
+ <dd>A description list is perfect for defining terms.</dd>
+ <dt>Term</dt>
+ <dd>Definition for the term.</dd>
+ <dd>A second definition for the same term.</dd>
+ <dt>Another term</dt>
+ <dd>Definition for this other term.</dd>
+</dl>
+`} />
## Inline code
The `<abbr>` element receives basic styling to make it stand out amongst paragraph text.
-<div class="bd-example">
-
The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element.
-</div>
+<Example showMarkup={false} code={`
+The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element.
+`} />
### 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.
-<div class="bd-example">
- <details>
- <summary>Some details</summary>
-
<p>More info about the details.</p>
- </details>
-
- <details open>
- <summary>Even more details</summary>
-
<p>Here are even more details about the details.</p>
- </details>
-</div>
+<Example showMarkup={false} code={`
+<details>
+ <summary>Some details</summary>
+ <p>More info about the details.</p>
+</details>
+
+<details open>
+ <summary>Even more details</summary>
+ <p>Here are even more details about the details.</p>
+</details>
+`} />
## HTML5 `[hidden]` attribute
Highlight a table row or cell by adding a `.table-active` class.
-<div class="bd-example">
- <thead>
- <tr>
- <th scope="col">#</th>
- <th scope="col">First</th>
- <th scope="col">Last</th>
- <th scope="col">Handle</th>
- </tr>
- </thead>
- <tbody>
- <tr class="table-active">
- <th scope="row">1</th>
- <td>Mark</td>
- <td>Otto</td>
- <td>@mdo</td>
- </tr>
- <tr>
- <th scope="row">2</th>
- <td>Jacob</td>
- <td>Thornton</td>
- <td>@fat</td>
- </tr>
- <tr>
- <th scope="row">3</th>
- <td>John</td>
- <td>Doe</td>
- <td class="table-active">@social</td>
- </tr>
- </tbody>
- </table>
-</div>
+<Example showMarkup={false} code={`
+<table class="table">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr class="table-active">
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>John</td>
+ <td>Doe</td>
+ <td class="table-active">@social</td>
+ </tr>
+ </tbody>
+</table>
+`} />
```html
<table class="table">
</table>
```
-<div class="bd-example">
-
<table class="table table-dark">
- <thead>
- <tr>
- <th scope="col">#</th>
- <th scope="col">First</th>
- <th scope="col">Last</th>
- <th scope="col">Handle</th>
- </tr>
- </thead>
- <tbody>
- <tr class="table-active">
- <th scope="row">1</th>
- <td>Mark</td>
- <td>Otto</td>
- <td>@mdo</td>
- </tr>
- <tr>
- <th scope="row">2</th>
- <td>Jacob</td>
- <td>Thornton</td>
- <td>@fat</td>
- </tr>
- <tr>
- <th scope="row">3</th>
- <td>John</td>
- <td>Doe</td>
- <td class="table-active">@social</td>
- </tr>
- </tbody>
- </table>
-</div>
+<Example showMarkup={false} code={`
+<table class="table table-dark">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr class="table-active">
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>John</td>
+ <td>Doe</td>
+ <td class="table-active">@social</td>
+ </tr>
+ </tbody>
+</table>
+`} />
```html
<table class="table table-dark">
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">
- <div class="table-responsive">
- <table class="table align-middle">
- <thead>
- <tr>
- <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 3</th>
- <th scope="col" class="w-25">Heading 4</th>
- </tr>
- </thead>
- <tbody>
- <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 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 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 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>
- <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>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>
- </tbody>
- </table>
- </div>
+<Example showMarkup={false} code={`
+<div class="table-responsive">
+ <table class="table align-middle">
+ <thead>
+ <tr>
+ <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 3</th>
+ <th scope="col" class="w-25">Heading 4</th>
+ </tr>
+ </thead>
+ <tbody>
+ <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 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 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 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>
+ <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>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>
+ </tbody>
+ </table>
</div>
+`} />
```html
<div class="table-responsive">
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">
<thead>
<tr>
</tr>
</tbody>
</table>
-</div>
+`} />
```html
<table class="table table-striped table-bordered">
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">
<thead class="table-light">
<tr>
</tr>
</tbody>
</table>
-</div>
+`} />
```html
<table class="table">
</table>
```
-<div class="bd-example">
+<Example showMarkup={false} code={`
<table class="table">
<thead class="table-dark">
<tr>
</tr>
</tbody>
</table>
-</div>
+`} />
```html
<table class="table">
### Table foot
-<div class="bd-example">
+<Example showMarkup={false} code={`
<table class="table">
<thead>
<tr>
</tr>
</tfoot>
</table>
-</div>
+`} />
```html
<table class="table">
Across every breakpoint, use `.table-responsive` for horizontally scrolling tables.
-<div class="bd-example">
- <div class="table-responsive">
- <table class="table">
- <thead>
- <tr>
- <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>
- </tr>
- </thead>
- <tbody>
- <tr>
- <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>
- </tr>
- <tr>
- <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>
- </tr>
- <tr>
- <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>
- </tr>
- </tbody>
- </table>
- </div>
+<Example showMarkup={false} code={`
+<div class="table-responsive">
+ <table class="table">
+ <thead>
+ <tr>
+ <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>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <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>
+ </tr>
+ <tr>
+ <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>
+ </tr>
+ <tr>
+ <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>
+ </tr>
+ </tbody>
+ </table>
</div>
+`} />
```html
<div class="table-responsive">
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">
-
<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-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-5 pb-3 mb-3 border-bottom">Display 5</div>
-
<div class="display-6">Display 6</div>
-</div>
+<Example showMarkup={false} code={`
+<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-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-5 pb-3 mb-3 border-bottom">Display 5</div>
+<div class="display-6">Display 6</div>
+`} />
```html
<h1 class="display-1">Display 1</h1>
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">
- <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.
- </div>
+<Example showMarkup={false} code={`
+<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.
</div>
+`} />
```html
<div class="callout">...</div>
}
```
-<div class="bd-example">
- The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element.
-</div>
+<Example showMarkup={false} code={`The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element.`} />
<Example code={`<div class="test">This is a test.</div>`} />
projects / thirdparty / bootstrap.git / commitdiff
