5206 added bootstrap 5.3 bages (#5234)

jdi-testing · Nov 27, 2023 · 6f58a27 · 6f58a27
1 parent e001057
commit 6f58a27
Showing 1 changed file with 73 additions and 0 deletions.
diff --git a/bootstrap-5-3-new.html b/bootstrap-5-3-new.html
@@ -584,6 +584,79 @@ <h4>Pill badges</h4>
                 <span class="badge rounded-pill text-bg-dark">Dark</span>
               </div>
             </div>
+            <div class="doc-space line">
+              <h2 class="block-title">Breadcrumb</h2>
+              <div class="html-center">
+                <h4>Ordinary Example</h4>
+                <p>
+                  Bootstrap:
+                  <a
+                    href="https://getbootstrap.com/docs/5.3/components/breadcrumb/#example"
+                    target="_blank"
+                    >https://getbootstrap.com/docs/5.3/components/breadcrumb/#example</a
+                  >
+                </p>
+              </div>
+              <div class="html-center mb-3">
+                <nav aria-label="breadcrumb">
+                  <ol class="breadcrumb">
+                    <li class="breadcrumb-item active" aria-current="page">Home</li>
+                  </ol>
+                </nav>
+
+                <nav aria-label="breadcrumb">
+                  <ol class="breadcrumb">
+                    <li class="breadcrumb-item"><a href="#">Home</a></li>
+                    <li class="breadcrumb-item active" aria-current="page">Library</li>
+                  </ol>
+                </nav>
+
+                <nav aria-label="breadcrumb">
+                  <ol class="breadcrumb">
+                    <li class="breadcrumb-item"><a href="#">Home</a></li>
+                    <li class="breadcrumb-item"><a href="#">Library</a></li>
+                    <li class="breadcrumb-item active" aria-current="page">Data</li>
+                  </ol>
+                </nav>
+              </div>
+              <hr>
+              <div class="html-center">
+                <h4>Dividers</h4>
+                <p>
+                  Bootstrap:
+                  <a
+                    href="https://getbootstrap.com/docs/5.3/components/breadcrumb/#dividers"
+                    target="_blank"
+                    >https://getbootstrap.com/docs/5.3/components/breadcrumb/#dividers</a
+                  >
+                </p>
+              </div>
+              <div class="html-center mb-3">
+                <div class="mb-3">
+                  <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
+                    <ol class="breadcrumb">
+                      <li class="breadcrumb-item"><a href="#">Home</a></li>
+                      <li class="breadcrumb-item active" aria-current="page">Library</li>
+                    </ol>
+                  </nav>
+                </div>
+                <div class="mb-3">
+                  <nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
+                    <ol class="breadcrumb">
+                      <li class="breadcrumb-item"><a href="#">Home</a></li>
+                      <li class="breadcrumb-item active" aria-current="page">Library</li>
+                    </ol>
+                  </nav>
+                </div>
+                <div>
+                  <nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
+                    <ol class="breadcrumb">
+                      <li class="breadcrumb-item"><a href="#">Home</a></li>
+                      <li class="breadcrumb-item active" aria-current="page">Library</li>
+                    </ol>
+                  </nav>
+                </div>
+              </div>
           </div>
       </main>
     </div>