diff options
| author | Gaël Poupard <ffoodd@users.noreply.github.com> | 2021-04-30 01:19:07 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-30 01:19:07 +0300 |
| commit | 7bbf6d9ad3299ec0dd5818c1028e761bde3039ab (patch) | |
| tree | db36580f2dace30c1a78f119c236c5d56e06b33d | |
| parent | 3bcb9e7df7bf86019dff534054aacd281fb3d8bf (diff) | |
Improve overall new examples' accessibility (#33772)
| -rw-r--r-- | site/content/docs/5.0/examples/features/index.html | 359 | ||||
| -rw-r--r-- | site/content/docs/5.0/examples/headers/index.html | 435 | ||||
| -rw-r--r-- | site/content/docs/5.0/examples/heroes/index.html | 178 | ||||
| -rw-r--r-- | site/content/docs/5.0/examples/pricing/index.html | 34 | ||||
| -rw-r--r-- | site/content/docs/5.0/examples/sidebars/index.html | 598 | ||||
| -rw-r--r-- | site/content/docs/5.0/examples/sidebars/sidebars.css | 4 | ||||
| -rw-r--r-- | site/content/docs/5.0/examples/starter-template/index.html | 53 |
7 files changed, 840 insertions, 821 deletions
diff --git a/site/content/docs/5.0/examples/features/index.html b/site/content/docs/5.0/examples/features/index.html index 3c174a0100..1e331f00af 100644 --- a/site/content/docs/5.0/examples/features/index.html +++ b/site/content/docs/5.0/examples/features/index.html @@ -64,222 +64,225 @@ body_class: "" <path fill-rule="evenodd" d="M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z"/> </symbol> </svg> +<main> + <h1 class="visually-hidden">Features examples</h1> -<div class="container px-4 py-5" id="featured-3"> - <h2 class="pb-2 border-bottom">Columns with icons</h2> - <div class="row g-4 py-5 row-cols-1 row-cols-lg-3"> - <div class="feature col"> - <div class="feature-icon bg-primary bg-gradient"> - <svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg> - </div> - <h2>Featured title</h2> - <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> - <a href="#" class="icon-link"> - Call to action - <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg> - </a> - </div> - <div class="feature col"> - <div class="feature-icon bg-primary bg-gradient"> - <svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg> - </div> - <h2>Featured title</h2> - <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> - <a href="#" class="icon-link"> - Call to action - <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg> - </a> - </div> - <div class="feature col"> - <div class="feature-icon bg-primary bg-gradient"> - <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> - </div> - <h2>Featured title</h2> - <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> - <a href="#" class="icon-link"> - Call to action - <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg> - </a> - </div> - </div> -</div> - -<div class="b-example-divider"></div> - -<div class="container px-4 py-5" id="hanging-icons"> - <h2 class="pb-2 border-bottom">Hanging icons</h2> - <div class="row g-4 py-5 row-cols-1 row-cols-lg-3"> - <div class="col d-flex align-items-start"> - <div class="icon-square bg-light text-dark flex-shrink-0 me-3"> - <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> - </div> - <div> + <div class="container px-4 py-5" id="featured-3"> + <h2 class="pb-2 border-bottom">Columns with icons</h2> + <div class="row g-4 py-5 row-cols-1 row-cols-lg-3"> + <div class="feature col"> + <div class="feature-icon bg-primary bg-gradient"> + <svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg> + </div> <h2>Featured title</h2> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> - <a href="#" class="btn btn-primary"> - Primary button + <a href="#" class="icon-link"> + Call to action + <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg> </a> </div> - </div> - <div class="col d-flex align-items-start"> - <div class="icon-square bg-light text-dark flex-shrink-0 me-3"> - <svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg> - </div> - <div> + <div class="feature col"> + <div class="feature-icon bg-primary bg-gradient"> + <svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg> + </div> <h2>Featured title</h2> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> - <a href="#" class="btn btn-primary"> - Primary button + <a href="#" class="icon-link"> + Call to action + <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg> </a> </div> - </div> - <div class="col d-flex align-items-start"> - <div class="icon-square bg-light text-dark flex-shrink-0 me-3"> - <svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg> - </div> - <div> + <div class="feature col"> + <div class="feature-icon bg-primary bg-gradient"> + <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> + </div> <h2>Featured title</h2> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> - <a href="#" class="btn btn-primary"> - Primary button + <a href="#" class="icon-link"> + Call to action + <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg> </a> </div> </div> </div> -</div> - -<div class="b-example-divider"></div> -<div class="container px-4 py-5" id="custom-cards"> - <h2 class="pb-2 border-bottom">Custom cards</h2> + <div class="b-example-divider"></div> - <div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5"> - <div class="col"> - <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-1.jpg');"> - <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1"> - <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Short title, long jacket</h2> - <ul class="d-flex list-unstyled mt-auto"> - <li class="me-auto"> - <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white"> - </li> - <li class="d-flex align-items-center me-3"> - <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg> - <small>Earth</small> - </li> - <li class="d-flex align-items-center"> - <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg> - <small>3d</small> - </li> - </ul> + <div class="container px-4 py-5" id="hanging-icons"> + <h2 class="pb-2 border-bottom">Hanging icons</h2> + <div class="row g-4 py-5 row-cols-1 row-cols-lg-3"> + <div class="col d-flex align-items-start"> + <div class="icon-square bg-light text-dark flex-shrink-0 me-3"> + <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> + </div> + <div> + <h2>Featured title</h2> + <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> + <a href="#" class="btn btn-primary"> + Primary button + </a> + </div> + </div> + <div class="col d-flex align-items-start"> + <div class="icon-square bg-light text-dark flex-shrink-0 me-3"> + <svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg> + </div> + <div> + <h2>Featured title</h2> + <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> + <a href="#" class="btn btn-primary"> + Primary button + </a> + </div> + </div> + <div class="col d-flex align-items-start"> + <div class="icon-square bg-light text-dark flex-shrink-0 me-3"> + <svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg> + </div> + <div> + <h2>Featured title</h2> + <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> + <a href="#" class="btn btn-primary"> + Primary button + </a> </div> </div> </div> + </div> + + <div class="b-example-divider"></div> - <div class="col"> - <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-2.jpg');"> - <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1"> - <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Much longer title that wraps to multiple lines</h2> - <ul class="d-flex list-unstyled mt-auto"> - <li class="me-auto"> - <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white"> - </li> - <li class="d-flex align-items-center me-3"> - <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg> - <small>Pakistan</small> - </li> - <li class="d-flex align-items-center"> - <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg> - <small>4d</small> - </li> - </ul> + <div class="container px-4 py-5" id="custom-cards"> + <h2 class="pb-2 border-bottom">Custom cards</h2> + + <div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5"> + <div class="col"> + <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-1.jpg');"> + <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1"> + <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Short title, long jacket</h2> + <ul class="d-flex list-unstyled mt-auto"> + <li class="me-auto"> + <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white"> + </li> + <li class="d-flex align-items-center me-3"> + <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg> + <small>Earth</small> + </li> + <li class="d-flex align-items-center"> + <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg> + <small>3d</small> + </li> + </ul> + </div> + </div> + </div> + + <div class="col"> + <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-2.jpg');"> + <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1"> + <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Much longer title that wraps to multiple lines</h2> + <ul class="d-flex list-unstyled mt-auto"> + <li class="me-auto"> + <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white"> + </li> + <li class="d-flex align-items-center me-3"> + <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg> + <small>Pakistan</small> + </li> + <li class="d-flex align-items-center"> + <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg> + <small>4d</small> + </li> + </ul> + </div> </div> </div> - </div> - <div class="col"> - <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-3.jpg');"> - <div class="d-flex flex-column h-100 p-5 pb-3 text-shadow-1"> - <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Another longer title belongs here</h2> - <ul class="d-flex list-unstyled mt-auto"> - <li class="me-auto"> - <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white"> - </li> - <li class="d-flex align-items-center me-3"> - <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg> - <small>California</small> - </li> - <li class="d-flex align-items-center"> - <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg> - <small>5d</small> - </li> - </ul> + <div class="col"> + <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-3.jpg');"> + <div class="d-flex flex-column h-100 p-5 pb-3 text-shadow-1"> + <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Another longer title belongs here</h2> + <ul class="d-flex list-unstyled mt-auto"> + <li class="me-auto"> + <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white"> + </li> + <li class="d-flex align-items-center me-3"> + <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg> + <small>California</small> + </li> + <li class="d-flex align-items-center"> + <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg> + <small>5d</small> + </li> + </ul> + </div> </div> </div> </div> </div> -</div> -<div class="b-example-divider"></div> + <div class="b-example-divider"></div> -<div class="container px-4 py-5" id="icon-grid"> - <h2 class="pb-2 border-bottom">Icon grid</h2> + <div class="container px-4 py-5" id="icon-grid"> + <h2 class="pb-2 border-bottom">Icon grid</h2> - <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5"> - <div class="col d-flex align-items-start"> - <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg> - <div> - <h4 class="fw-bold mb-0">Featured title</h4> - <p>Paragraph of text beneath the heading to explain the heading.</p> + <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5"> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> </div> - </div> - <div class="col d-flex align-items-start"> - <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg> - <div> - <h4 class="fw-bold mb-0">Featured title</h4> - <p>Paragraph of text beneath the heading to explain the heading.</p> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> </div> - </div> - <div class="col d-flex align-items-start"> - <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg> - <div> - <h4 class="fw-bold mb-0">Featured title</h4> - <p>Paragraph of text beneath the heading to explain the heading.</p> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> </div> - </div> - <div class="col d-flex align-items-start"> - <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg> - <div> - <h4 class="fw-bold mb-0">Featured title</h4> - <p>Paragraph of text beneath the heading to explain the heading.</p> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> </div> - </div> - <div class="col d-flex align-items-start"> - <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg> - <div> - <h4 class="fw-bold mb-0">Featured title</h4> - <p>Paragraph of text beneath the heading to explain the heading.</p> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> </div> - </div> - <div class="col d-flex align-items-start"> - <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg> - <div> - <h4 class="fw-bold mb-0">Featured title</h4> - <p>Paragraph of text beneath the heading to explain the heading.</p> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> </div> - </div> - <div class="col d-flex align-items-start"> - <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg> - <div> - <h4 class="fw-bold mb-0">Featured title</h4> - <p>Paragraph of text beneath the heading to explain the heading.</p> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> </div> - </div> - <div class="col d-flex align-items-start"> - <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg> - <div> - <h4 class="fw-bold mb-0">Featured title</h4> - <p>Paragraph of text beneath the heading to explain the heading.</p> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> </div> </div> </div> -</div> +</main> diff --git a/site/content/docs/5.0/examples/headers/index.html b/site/content/docs/5.0/examples/headers/index.html index 2a4585e9d5..e15b47e5f5 100644 --- a/site/content/docs/5.0/examples/headers/index.html +++ b/site/content/docs/5.0/examples/headers/index.html @@ -30,261 +30,266 @@ body_class: "" </symbol> </svg> -<div class="container"> - <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom"> - <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none"> - <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> - <span class="fs-4">Simple header</span> - </a> - - <ul class="nav nav-pills"> - <li class="nav-item"><a href="#" class="nav-link active">Home</a></li> - <li class="nav-item"><a href="#" class="nav-link">Features</a></li> - <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li> - <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li> - <li class="nav-item"><a href="#" class="nav-link">About</a></li> - </ul> - </header> -</div> - -<div class="b-example-divider"></div> - -<div class="container"> - <header class="d-flex justify-content-center py-3"> - <ul class="nav nav-pills"> - <li class="nav-item"><a href="#" class="nav-link active">Home</a></li> - <li class="nav-item"><a href="#" class="nav-link">Features</a></li> - <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li> - <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li> - <li class="nav-item"><a href="#" class="nav-link">About</a></li> - </ul> - </header> -</div> - -<div class="b-example-divider"></div> - -<div class="container"> - <header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom"> - <a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none"> - <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> - </a> - - <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0"> - <li><a href="#" class="nav-link px-2 link-secondary">Home</a></li> - <li><a href="#" class="nav-link px-2 link-dark">Features</a></li> - <li><a href="#" class="nav-link px-2 link-dark">Pricing</a></li> - <li><a href="#" class="nav-link px-2 link-dark">FAQs</a></li> - <li><a href="#" class="nav-link px-2 link-dark">About</a></li> - </ul> - - <div class="col-md-3 text-end"> - <button type="button" class="btn btn-outline-primary me-2">Login</button> - <button type="button" class="btn btn-primary">Sign-up</button> - </div> - </header> -</div> - -<div class="b-example-divider"></div> +<main> + <h1 class="visually-hidden">Headers examples</h1> -<header class="p-3 bg-dark text-white"> <div class="container"> - <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> - <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none"> + <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom"> + <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none"> <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + <span class="fs-4">Simple header</span> </a> - <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"> - <li><a href="#" class="nav-link px-2 text-secondary">Home</a></li> - <li><a href="#" class="nav-link px-2 text-white">Features</a></li> - <li><a href="#" class="nav-link px-2 text-white">Pricing</a></li> - <li><a href="#" class="nav-link px-2 text-white">FAQs</a></li> - <li><a href="#" class="nav-link px-2 text-white">About</a></li> + <ul class="nav nav-pills"> + <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li> + <li class="nav-item"><a href="#" class="nav-link">Features</a></li> + <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li> + <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li> + <li class="nav-item"><a href="#" class="nav-link">About</a></li> </ul> + </header> + </div> - <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3"> - <input type="search" class="form-control form-control-dark" placeholder="Search..."> - </form> + <div class="b-example-divider"></div> - <div class="text-end"> - <button type="button" class="btn btn-outline-light me-2">Login</button> - <button type="button" class="btn btn-warning">Sign-up</button> - </div> - </div> + <div class="container"> + <header class="d-flex justify-content-center py-3"> + <ul class="nav nav-pills"> + <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li> + <li class="nav-item"><a href="#" class="nav-link">Features</a></li> + <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li> + <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li> + <li class="nav-item"><a href="#" class="nav-link">About</a></li> + </ul> + </header> </div> -</header> -<div class="b-example-divider"></div> + <div class="b-example-divider"></div> -<header class="p-3 mb-3 border-bottom"> <div class="container"> - <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> - <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-dark text-decoration-none"> - <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + <header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom"> + <a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none"> + <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg> </a> - <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"> - <li><a href="#" class="nav-link px-2 link-secondary">Overview</a></li> - <li><a href="#" class="nav-link px-2 link-dark">Inventory</a></li> - <li><a href="#" class="nav-link px-2 link-dark">Customers</a></li> - <li><a href="#" class="nav-link px-2 link-dark">Products</a></li> + <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0"> + <li><a href="#" class="nav-link px-2 link-secondary">Home</a></li> + <li><a href="#" class="nav-link px-2 link-dark">Features</a></li> + <li><a href="#" class="nav-link px-2 link-dark">Pricing</a></li> + <li><a href="#" class="nav-link px-2 link-dark">FAQs</a></li> + <li><a href="#" class="nav-link px-2 link-dark">About</a></li> </ul> - <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3"> - <input type="search" class="form-control" placeholder="Search..."> - </form> + <div class="col-md-3 text-end"> + <button type="button" class="btn btn-outline-primary me-2">Login</button> + <button type="button" class="btn btn-primary">Sign-up</button> + </div> + </header> + </div> + + <div class="b-example-divider"></div> - <div class="dropdown text-end"> - <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false"> - <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle"> + <header class="p-3 bg-dark text-white"> + <div class="container"> + <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> + <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none"> + <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg> </a> - <ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1"> - <li><a class="dropdown-item" href="#">New project...</a></li> - <li><a class="dropdown-item" href="#">Settings</a></li> - <li><a class="dropdown-item" href="#">Profile</a></li> - <li><hr class="dropdown-divider"></li> - <li><a class="dropdown-item" href="#">Sign out</a></li> + + <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"> + <li><a href="#" class="nav-link px-2 text-secondary">Home</a></li> + <li><a href="#" class="nav-link px-2 text-white">Features</a></li> + <li><a href="#" class="nav-link px-2 text-white">Pricing</a></li> + <li><a href="#" class="nav-link px-2 text-white">FAQs</a></li> + <li><a href="#" class="nav-link px-2 text-white">About</a></li> </ul> + + <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3"> + <input type="search" class="form-control form-control-dark" placeholder="Search..." aria-label="Search"> + </form> + + <div class="text-end"> + <button type="button" class="btn btn-outline-light me-2">Login</button> + <button type="button" class="btn btn-warning">Sign-up</button> + </div> </div> </div> - </div> -</header> + </header> -<div class="b-example-divider"></div> + <div class="b-example-divider"></div> -<header class="py-3 mb-3 border-bottom"> - <div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;"> - <div class="dropdown"> - <a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-dark text-decoration-none dropdown-toggle" id="dropdownNavLink" data-bs-toggle="dropdown" aria-expanded="false"> - <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> - </a> - <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownNavLink"> - <li><a class="dropdown-item active" href="#">Overview</a></li> - <li><a class="dropdown-item" href="#">Inventory</a></li> - <li><a class="dropdown-item" href="#">Customers</a></li> - <li><a class="dropdown-item" href="#">Products</a></li> - <li><hr class="dropdown-divider"></li> - <li><a class="dropdown-item" href="#">Reports</a></li> - <li><a class="dropdown-item" href="#">Analytics</a></li> - </ul> + <header class="p-3 mb-3 border-bottom"> + <div class="container"> + <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> + <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-dark text-decoration-none"> + <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg> + </a> + + <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"> + <li><a href="#" class="nav-link px-2 link-secondary">Overview</a></li> + <li><a href="#" class="nav-link px-2 link-dark">Inventory</a></li> + <li><a href="#" class="nav-link px-2 link-dark">Customers</a></li> + <li><a href="#" class="nav-link px-2 link-dark">Products</a></li> + </ul> + + <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3"> + <input type="search" class="form-control" placeholder="Search..." aria-label="Search"> + </form> + + <div class="dropdown text-end"> + <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false"> + <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle"> + </a> + <ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1"> + <li><a class="dropdown-item" href="#">New project...</a></li> + <li><a class="dropdown-item" href="#">Settings</a></li> + <li><a class="dropdown-item" href="#">Profile</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Sign out</a></li> + </ul> + </div> + </div> </div> + </header> - <div class="d-flex align-items-center"> - <form class="w-100 me-3"> - <input type="search" class="form-control" placeholder="Search..."> - </form> + <div class="b-example-divider"></div> - <div class="flex-shrink-0 dropdown"> - <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false"> - <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle"> + <header class="py-3 mb-3 border-bottom"> + <div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;"> + <div class="dropdown"> + <a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-dark text-decoration-none dropdown-toggle" id="dropdownNavLink" data-bs-toggle="dropdown" aria-expanded="false"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> </a> - <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2"> - <li><a class="dropdown-item" href="#">New project...</a></li> - <li><a class="dropdown-item" href="#">Settings</a></li> - <li><a class="dropdown-item" href="#">Profile</a></li> + <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownNavLink"> + <li><a class="dropdown-item active" href="#" aria-current="page">Overview</a></li> + <li><a class="dropdown-item" href="#">Inventory</a></li> + <li><a class="dropdown-item" href="#">Customers</a></li> + <li><a class="dropdown-item" href="#">Products</a></li> <li><hr class="dropdown-divider"></li> - <li><a class="dropdown-item" href="#">Sign out</a></li> + <li><a class="dropdown-item" href="#">Reports</a></li> + <li><a class="dropdown-item" href="#">Analytics</a></li> </ul> </div> - </div> - </div> -</header> -<main class="container-fluid pb-3"> - <div class="d-grid gap-3" style="grid-template-columns: 1fr 2fr;"> - <div class="bg-light border rounded-3"> - <br><br><br><br><br><br><br><br><br><br> - </div> - <div class="bg-light border rounded-3"> - <br><br><br><br><br><br><br><br><br><br> + <div class="d-flex align-items-center"> + <form class="w-100 me-3"> + <input type="search" class="form-control" placeholder="Search..." aria-label="Search"> + </form> + + <div class="flex-shrink-0 dropdown"> + <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false"> + <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle"> + </a> + <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2"> + <li><a class="dropdown-item" href="#">New project...</a></li> + <li><a class="dropdown-item" href="#">Settings</a></li> + <li><a class="dropdown-item" href="#">Profile</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Sign out</a></li> + </ul> + </div> + </div> </div> - </div> -</main> + </header> -<div class="b-example-divider"></div> - -<nav class="py-2 bg-light border-bottom"> - <div class="container d-flex flex-wrap"> - <ul class="nav me-auto"> - <li class="nav-item"><a href="#" class="nav-link link-dark px-2 active">Home</a></li> - <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Features</a></li> - <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Pricing</a></li> - <li class="nav-item"><a href="#" class="nav-link link-dark px-2">FAQs</a></li> - <li class="nav-item"><a href="#" class="nav-link link-dark px-2">About</a></li> - </ul> - <ul class="nav"> - <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Login</a></li> - <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Sign up</a></li> - </ul> - </div> -</nav> -<header class="py-3 mb-4 border-bottom"> - <div class="container d-flex flex-wrap justify-content-center"> - <a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto text-dark text-decoration-none"> - <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> - <span class="fs-4">Double header</span> - </a> - <form class="col-12 col-lg-auto mb-3 mb-lg-0"> - <input type="search" class="form-control" placeholder="Search..."> - </form> + <div class="container-fluid pb-3"> + <div class="d-grid gap-3" style="grid-template-columns: 1fr 2fr;"> + <div class="bg-light border rounded-3"> + <br><br><br><br><br><br><br><br><br><br> + </div> + <div class="bg-light border rounded-3"> + <br><br><br><br><br><br><br><br><br><br> + </div> + </div> </div> -</header> -<div class="b-example-divider"></div> + <div class="b-example-divider"></div> -<header class="px-3 py-2 bg-dark text-white"> - <div class="container"> - <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> - <a href="/" class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none"> + <nav class="py-2 bg-light border-bottom"> + <div class="container d-flex flex-wrap"> + <ul class="nav me-auto"> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2 active" aria-current="page">Home</a></li> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Features</a></li> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Pricing</a></li> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2">FAQs</a></li> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2">About</a></li> + </ul> + <ul class="nav"> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Login</a></li> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Sign up</a></li> + </ul> + </div> + </nav> + <header class="py-3 mb-4 border-bottom"> + <div class="container d-flex flex-wrap justify-content-center"> + <a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto text-dark text-decoration-none"> <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + <span class="fs-4">Double header</span> </a> - - <ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small"> - <li> - <a href="#" class="nav-link text-secondary"> - <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#home"/></svg> - Home - </a> - </li> - <li> - <a href="#" class="nav-link text-white"> - <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#speedometer2"/></svg> - Dashboard - </a> - </li> - <li> - <a href="#" class="nav-link text-white"> - <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#table"/></svg> - Orders - </a> - </li> - <li> - <a href="#" class="nav-link text-white"> - <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#grid"/></svg> - Products - </a> - </li> - <li> - <a href="#" class="nav-link text-white"> - <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#people-circle"/></svg> - Customers - </a> - </li> - </ul> + <form class="col-12 col-lg-auto mb-3 mb-lg-0"> + <input type="search" class="form-control" placeholder="Search..." aria-label="Search"> + </form> </div> - </div> -</header> + </header> -<div class="px-3 py-2 border-bottom mb-3"> - <div class="container d-flex flex-wrap justify-content-center"> - <form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto"> - <input type="search" class="form-control" placeholder="Search..."> - </form> + <div class="b-example-divider"></div> - <div class="text-end"> - <button type="button" class="btn btn-light text-dark me-2">Login</button> - <button type="button" class="btn btn-primary">Sign-up</button> + <header> + <div class="px-3 py-2 bg-dark text-white"> + <div class="container"> + <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> + <a href="/" class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none"> + <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg> + </a> + + <ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small"> + <li> + <a href="#" class="nav-link text-secondary"> + <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#home"/></svg> + Home + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#speedometer2"/></svg> + Dashboard + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#table"/></svg> + Orders + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#grid"/></svg> + Products + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#people-circle"/></svg> + Customers + </a> + </li> + </ul> + </div> + </div> </div> - </div> -</div> + <div class="px-3 py-2 border-bottom mb-3"> + <div class="container d-flex flex-wrap justify-content-center"> + <form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto"> + <input type="search" class="form-control" placeholder="Search..." aria-label="Search"> + </form> + + <div class="text-end"> + <button type="button" class="btn btn-light text-dark me-2">Login</button> + <button type="button" class="btn btn-primary">Sign-up</button> + </div> + </div> + </div> + </header> -<div class="b-example-divider"></div> + <div class="b-example-divider"></div> +</main> diff --git a/site/content/docs/5.0/examples/heroes/index.html b/site/content/docs/5.0/examples/heroes/index.html index 7d553a16ba..4d97292a8d 100644 --- a/site/content/docs/5.0/examples/heroes/index.html +++ b/site/content/docs/5.0/examples/heroes/index.html @@ -6,118 +6,122 @@ extra_css: body_class: "" --- -<div class="px-4 py-5 my-5 text-center"> - <img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57"> - <h1 class="display-5 fw-bold">Centered hero</h1> - <div class="col-lg-6 mx-auto"> - <p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> - <div class="d-grid gap-2 d-sm-flex justify-content-sm-center"> - <button type="button" class="btn btn-primary btn-lg px-4 me-sm-3">Primary button</button> - <button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button> +<main> + <h1 class="visually-hidden">Heroes examples</h1> + + <div class="px-4 py-5 my-5 text-center"> + <img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57"> + <h1 class="display-5 fw-bold">Centered hero</h1> + <div class="col-lg-6 mx-auto"> + <p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> + <div class="d-grid gap-2 d-sm-flex justify-content-sm-center"> + <button type="button" class="btn btn-primary btn-lg px-4 me-sm-3">Primary button</button> + <button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button> + </div> </div> </div> -</div> -<div class="b-example-divider"></div> + <div class="b-example-divider"></div> -<div class="px-4 pt-5 my-5 text-center border-bottom"> - <h1 class="display-4 fw-bold">Centered screenshot</h1> - <div class="col-lg-6 mx-auto"> - <p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> - <div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5"> - <button type="button" class="btn btn-primary btn-lg px-4 me-sm-3">Primary button</button> - <button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button> + <div class="px-4 pt-5 my-5 text-center border-bottom"> + <h1 class="display-4 fw-bold">Centered screenshot</h1> + <div class="col-lg-6 mx-auto"> + <p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> + <div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5"> + <button type="button" class="btn btn-primary btn-lg px-4 me-sm-3">Primary button</button> + <button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button> + </div> </div> - </div> - <div class="overflow-hidden" style="max-height: 30vh;"> - <div class="container px-5"> - <img src="bootstrap-docs.png" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Example image" width="700" height="500" loading="lazy"> + <div class="overflow-hidden" style="max-height: 30vh;"> + <div class="container px-5"> + <img src="bootstrap-docs.png" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Example image" width="700" height="500" loading="lazy"> + </div> </div> </div> -</div> -<div class="b-example-divider"></div> + <div class="b-example-divider"></div> -<div class="container col-xxl-8 px-4 py-5"> - <div class="row flex-lg-row-reverse align-items-center g-5 py-5"> - <div class="col-10 col-sm-8 col-lg-6"> - <img src="bootstrap-themes.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy"> - </div> - <div class="col-lg-6"> - <h1 class="display-5 fw-bold lh-1 mb-3">Responsive left-aligned hero with image</h1> - <p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> - <div class="d-grid gap-2 d-md-flex justify-content-md-start"> - <button type="button" class="btn btn-primary btn-lg px-4 me-md-2">Primary</button> - <button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button> + <div class="container col-xxl-8 px-4 py-5"> + <div class="row flex-lg-row-reverse align-items-center g-5 py-5"> + <div class="col-10 col-sm-8 col-lg-6"> + <img src="bootstrap-themes.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy"> + </div> + <div class="col-lg-6"> + <h1 class="display-5 fw-bold lh-1 mb-3">Responsive left-aligned hero with image</h1> + <p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> + <div class="d-grid gap-2 d-md-flex justify-content-md-start"> + <button type="button" class="btn btn-primary btn-lg px-4 me-md-2">Primary</button> + <button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button> + </div> </div> </div> </div> -</div> -<div class="b-example-divider"></div> + <div class="b-example-divider"></div> -<div class="container col-xl-10 col-xxl-8 px-4 py-5"> - <div class="row align-items-center g-lg-5 py-5"> - <div class="col-lg-7 text-center text-lg-start"> - <h1 class="display-4 fw-bold lh-1 mb-3">Vertically centered hero sign-up form</h1> - <p class="col-lg-10 fs-4">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p> - </div> - <div class="col-md-10 mx-auto col-lg-5"> - <form class="p-4 p-md-5 border rounded-3 bg-light"> - <div class="form-floating mb-3"> - <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com"> - <label for="floatingInput">Email address</label> - </div> - <div class="form-floating mb-3"> - <input type="password" class="form-control" id="floatingPassword" placeholder="Password"> - <label for="floatingPassword">Password</label> - </div> - <div class="checkbox mb-3"> - <label> - <input type="checkbox" value="remember-me"> Remember me - </label> - </div> - <button class="w-100 btn btn-lg btn-primary" type="submit">Sign up</button> - <hr class="my-4"> - <small class="text-muted">By clicking Sign up, you agree to the terms of use.</small> - </form> + <div class="container col-xl-10 col-xxl-8 px-4 py-5"> + <div class="row align-items-center g-lg-5 py-5"> + <div class="col-lg-7 text-center text-lg-start"> + <h1 class="display-4 fw-bold lh-1 mb-3">Vertically centered hero sign-up form</h1> + <p class="col-lg-10 fs-4">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p> + </div> + <div class="col-md-10 mx-auto col-lg-5"> + <form class="p-4 p-md-5 border rounded-3 bg-light"> + <div class="form-floating mb-3"> + <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com"> + <label for="floatingInput">Email address</label> + </div> + <div class="form-floating mb-3"> + <input type="password" class="form-control" id="floatingPassword" placeholder="Password"> + <label for="floatingPassword">Password</label> + </div> + <div class="checkbox mb-3"> + <label> + <input type="checkbox" value="remember-me"> Remember me + </label> + </div> + <button class="w-100 btn btn-lg btn-primary" type="submit">Sign up</button> + <hr class="my-4"> + <small class="text-muted">By clicking Sign up, you agree to the terms of use.</small> + </form> + </div> </div> </div> -</div> -<div class="b-example-divider"></div> + <div class="b-example-divider"></div> -<div class="container my-5"> - <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg"> - <div class="col-lg-7 p-3 p-lg-5 pt-lg-3"> - <h1 class="display-4 fw-bold lh-1">Border hero with cropped image and shadows</h1> - <p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> - <div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3"> - <button type="button" class="btn btn-primary btn-lg px-4 me-md-2 fw-bold">Primary</button> - <button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button> + <div class="container my-5"> + <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg"> + <div class="col-lg-7 p-3 p-lg-5 pt-lg-3"> + <h1 class="display-4 fw-bold lh-1">Border hero with cropped image and shadows</h1> + <p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> + <div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3"> + <button type="button" class="btn btn-primary btn-lg px-4 me-md-2 fw-bold">Primary</button> + <button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button> + </div> </div> - </div> - <div class="col-lg-4 offset-lg-1 p-0 position-relative overflow-hidden shadow-lg"> - <div class="position-lg-absolute top-0 left-0 overflow-hidden"> - <img class="d-block rounded-lg-3" src="bootstrap-docs.png" alt="" width="720"> + <div class="col-lg-4 offset-lg-1 p-0 position-relative overflow-hidden shadow-lg"> + <div class="position-lg-absolute top-0 left-0 overflow-hidden"> + <img class="d-block rounded-lg-3" src="bootstrap-docs.png" alt="" width="720"> + </div> </div> </div> </div> -</div> -<div class="b-example-divider"></div> + <div class="b-example-divider"></div> -<div class="bg-dark text-secondary px-4 py-5 text-center"> - <div class="py-5"> - <h1 class="display-5 fw-bold text-white">Dark mode hero</h1> - <div class="col-lg-6 mx-auto"> - <p class="fs-5 mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> - <div class="d-grid gap-2 d-sm-flex justify-content-sm-center"> - <button type="button" class="btn btn-outline-info btn-lg px-4 me-sm-3 fw-bold">Custom button</button> - <button type="button" class="btn btn-outline-light btn-lg px-4">Secondary</button> + <div class="bg-dark text-secondary px-4 py-5 text-center"> + <div class="py-5"> + <h1 class="display-5 fw-bold text-white">Dark mode hero</h1> + <div class="col-lg-6 mx-auto"> + <p class="fs-5 mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> + <div class="d-grid gap-2 d-sm-flex justify-content-sm-center"> + <button type="button" class="btn btn-outline-info btn-lg px-4 me-sm-3 fw-bold">Custom button</button> + <button type="button" class="btn btn-outline-light btn-lg px-4">Secondary</button> + </div> </div> </div> </div> -</div> -<div class="b-example-divider mb-0"></div> + <div class="b-example-divider mb-0"></div> +</main> diff --git a/site/content/docs/5.0/examples/pricing/index.html b/site/content/docs/5.0/examples/pricing/index.html index 5f09c529fd..c62c68c70a 100644 --- a/site/content/docs/5.0/examples/pricing/index.html +++ b/site/content/docs/5.0/examples/pricing/index.html @@ -14,24 +14,26 @@ include_js: false </svg> <div class="container py-3"> - <header class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom"> - <a href="/" class="d-flex align-items-center text-dark text-decoration-none"> - <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg> - <span class="fs-4">Pricing example</span> - </a> + <header> + <div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom"> + <a href="/" class="d-flex align-items-center text-dark text-decoration-none"> + <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg> + <span class="fs-4">Pricing example</span> + </a> - <nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto"> - <a class="me-3 py-2 text-dark text-decoration-none" href="#">Features</a> - <a class="me-3 py-2 text-dark text-decoration-none" href="#">Enterprise</a> - <a class="me-3 py-2 text-dark text-decoration-none" href="#">Support</a> - <a class="py-2 text-dark text-decoration-none" href="#">Pricing</a> - </nav> - </header> + <nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto"> + <a class="me-3 py-2 text-dark text-decoration-none" href="#">Features</a> + <a class="me-3 py-2 text-dark text-decoration-none" href="#">Enterprise</a> + <a class="me-3 py-2 text-dark text-decoration-none" href="#">Support</a> + <a class="py-2 text-dark text-decoration-none" href="#">Pricing</a> + </nav> + </div> - <div class="pricing-header p-3 pb-md-4 mx-auto text-center"> - <h1 class="display-4 fw-normal">Pricing</h1> - <p class="fs-5 text-muted">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p> - </div> + <div class="pricing-header p-3 pb-md-4 mx-auto text-center"> + <h1 class="display-4 fw-normal">Pricing</h1> + <p class="fs-5 text-muted">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p> + </div> + </header> <main> <div class="row row-cols-1 row-cols-md-3 mb-3 text-center"> diff --git a/site/content/docs/5.0/examples/sidebars/index.html b/site/content/docs/5.0/examples/sidebars/index.html index 76feca9170..cdb7d8eace 100644 --- a/site/content/docs/5.0/examples/sidebars/index.html +++ b/site/content/docs/5.0/examples/sidebars/index.html @@ -67,321 +67,325 @@ body_class: "" </symbol> </svg> -<div class="d-flex flex-column p-3 text-white bg-dark" style="width: 280px;"> - <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none"> - <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> - <span class="fs-4">Sidebar</span> - </a> - <hr> - <ul class="nav nav-pills flex-column mb-auto"> - <li class="nav-item"> - <a href="#" class="nav-link active"> - <svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg> - Home - </a> - </li> - <li> - <a href="#" class="nav-link text-white"> - <svg class="bi me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg> - Dashboard - </a> - </li> - <li> - <a href="#" class="nav-link text-white"> - <svg class="bi me-2" width="16" height="16"><use xlink:href="#table"/></svg> - Orders - </a> - </li> - <li> - <a href="#" class="nav-link text-white"> - <svg class="bi me-2" width="16" height="16"><use xlink:href="#grid"/></svg> - Products - </a> - </li> - <li> - <a href="#" class="nav-link text-white"> - <svg class="bi me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg> - Customers - </a> - </li> - </ul> - <hr> - <div class="dropdown"> - <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false"> - <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle me-2"> - <strong>mdo</strong> +<main> + <h1 class="visually-hidden">Sidebars examples</h1> + + <div class="d-flex flex-column p-3 text-white bg-dark" style="width: 280px;"> + <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + <span class="fs-4">Sidebar</span> </a> - <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1"> - <li><a class="dropdown-item" href="#">New project...</a></li> - <li><a class="dropdown-item" href="#">Settings</a></li> - <li><a class="dropdown-item" href="#">Profile</a></li> - <li><hr class="dropdown-divider"></li> - <li><a class="dropdown-item" href="#">Sign out</a></li> + <hr> + <ul class="nav nav-pills flex-column mb-auto"> + <li class="nav-item"> + <a href="#" class="nav-link active" aria-current="page"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg> + Home + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg> + Dashboard + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#table"/></svg> + Orders + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#grid"/></svg> + Products + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg> + Customers + </a> + </li> </ul> + <hr> + <div class="dropdown"> + <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false"> + <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2"> + <strong>mdo</strong> + </a> + <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1"> + <li><a class="dropdown-item" href="#">New project...</a></li> + <li><a class="dropdown-item" href="#">Settings</a></li> + <li><a class="dropdown-item" href="#">Profile</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Sign out</a></li> + </ul> + </div> </div> -</div> -<div class="b-example-divider"></div> + <div class="b-example-divider"></div> -<div class="d-flex flex-column p-3 bg-light" style="width: 280px;"> - <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none"> - <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> - <span class="fs-4">Sidebar</span> - </a> - <hr> - <ul class="nav nav-pills flex-column mb-auto"> - <li class="nav-item"> - <a href="#" class="nav-link active"> - <svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg> - Home - </a> - </li> - <li> - <a href="#" class="nav-link link-dark"> - <svg class="bi me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg> - Dashboard - </a> - </li> - <li> - <a href="#" class="nav-link link-dark"> - <svg class="bi me-2" width="16" height="16"><use xlink:href="#table"/></svg> - Orders - </a> - </li> - <li> - <a href="#" class="nav-link link-dark"> - <svg class="bi me-2" width="16" height="16"><use xlink:href="#grid"/></svg> - Products - </a> - </li> - <li> - <a href="#" class="nav-link link-dark"> - <svg class="bi me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg> - Customers - </a> - </li> - </ul> - <hr> - <div class="dropdown"> - <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false"> - <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle me-2"> - <strong>mdo</strong> + <div class="d-flex flex-column p-3 bg-light" style="width: 280px;"> + <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + <span class="fs-4">Sidebar</span> </a> - <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2"> - <li><a class="dropdown-item" href="#">New project...</a></li> - <li><a class="dropdown-item" href="#">Settings</a></li> - <li><a class="dropdown-item" href="#">Profile</a></li> - <li><hr class="dropdown-divider"></li> - <li><a class="dropdown-item" href="#">Sign out</a></li> + <hr> + <ul class="nav nav-pills flex-column mb-auto"> + <li class="nav-item"> + <a href="#" class="nav-link active" aria-current="page"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg> + Home + </a> + </li> + <li> + <a href="#" class="nav-link link-dark"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg> + Dashboard + </a> + </li> + <li> + <a href="#" class="nav-link link-dark"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#table"/></svg> + Orders + </a> + </li> + <li> + <a href="#" class="nav-link link-dark"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#grid"/></svg> + Products + </a> + </li> + <li> + <a href="#" class="nav-link link-dark"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg> + Customers + </a> + </li> </ul> + <hr> + <div class="dropdown"> + <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false"> + <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2"> + <strong>mdo</strong> + </a> + <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2"> + <li><a class="dropdown-item" href="#">New project...</a></li> + <li><a class="dropdown-item" href="#">Settings</a></li> + <li><a class="dropdown-item" href="#">Profile</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Sign out</a></li> + </ul> + </div> </div> -</div> -<div class="b-example-divider"></div> + <div class="b-example-divider"></div> -<div class="d-flex flex-column bg-light" style="width: 4.5rem;"> - <a href="/" class="d-block p-3 link-dark text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right"> - <svg class="bi" width="40" height="32"><use xlink:href="#bootstrap"/></svg> - <span class="visually-hidden">Icon-only</span> - </a> - <ul class="nav nav-pills nav-flush flex-column mb-auto text-center"> - <li class="nav-item"> - <a href="#" class="nav-link active py-3 border-bottom" title="Home" data-bs-toggle="tooltip" data-bs-placement="right"> - <svg class="bi" width="24" height="24"><use xlink:href="#home"/></svg> - </a> - </li> - <li> - <a href="#" class="nav-link py-3 border-bottom" title="Dashboard" data-bs-toggle="tooltip" data-bs-placement="right"> - <svg class="bi" width="24" height="24"><use xlink:href="#speedometer2"/></svg> - </a> - </li> - <li> - <a href="#" class="nav-link py-3 border-bottom" title="Orders" data-bs-toggle="tooltip" data-bs-placement="right"> - <svg class="bi" width="24" height="24"><use xlink:href="#table"/></svg> - </a> - </li> - <li> - <a href="#" class="nav-link py-3 border-bottom" title="Products" data-bs-toggle="tooltip" data-bs-placement="right"> - <svg class="bi" width="24" height="24"><use xlink:href="#grid"/></svg> - </a> - </li> - <li> - <a href="#" class="nav-link py-3 border-bottom" title="Customers" data-bs-toggle="tooltip" data-bs-placement="right"> - <svg class="bi" width="24" height="24"><use xlink:href="#people-circle"/></svg> - </a> - </li> - </ul> - <div class="dropdown border-top"> - <a href="#" class="d-flex align-items-center justify-content-center p-3 link-dark text-decoration-none dropdown-toggle" id="dropdownUser3" data-bs-toggle="dropdown" aria-expanded="false"> - <img src="https://github.com/mdo.png" alt="mdo" width="24" height="24" class="rounded-circle"> + <div class="d-flex flex-column bg-light" style="width: 4.5rem;"> + <a href="/" class="d-block p-3 link-dark text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right"> + <svg class="bi" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + <span class="visually-hidden">Icon-only</span> </a> - <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser3"> - <li><a class="dropdown-item" href="#">New project...</a></li> - <li><a class="dropdown-item" href="#">Settings</a></li> - <li><a class="dropdown-item" href="#">Profile</a></li> - <li><hr class="dropdown-divider"></li> - <li><a class="dropdown-item" href="#">Sign out</a></li> + <ul class="nav nav-pills nav-flush flex-column mb-auto text-center"> + <li class="nav-item"> + <a href="#" class="nav-link active py-3 border-bottom" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right"> + <svg class="bi" width="24" height="24" role="img" aria-label="Home"><use xlink:href="#home"/></svg> + </a> + </li> + <li> + <a href="#" class="nav-link py-3 border-bottom" title="Dashboard" data-bs-toggle="tooltip" data-bs-placement="right"> + <svg class="bi" width="24" height="24"><use xlink:href="#speedometer2"/></svg> + </a> + </li> + <li> + <a href="#" class="nav-link py-3 border-bottom" title="Orders" data-bs-toggle="tooltip" data-bs-placement="right"> + <svg class="bi" width="24" height="24"><use xlink:href="#table"/></svg> + </a> + </li> + <li> + <a href="#" class="nav-link py-3 border-bottom" title="Products" data-bs-toggle="tooltip" data-bs-placement="right"> + <svg class="bi" width="24" height="24"><use xlink:href="#grid"/></svg> + </a> + </li> + <li> + <a href="#" class="nav-link py-3 border-bottom" title="Customers" data-bs-toggle="tooltip" data-bs-placement="right"> + <svg class="bi" width="24" height="24"><use xlink:href="#people-circle"/></svg> + </a> + </li> </ul> + <div class="dropdown border-top"> + <a href="#" class="d-flex align-items-center justify-content-center p-3 link-dark text-decoration-none dropdown-toggle" id="dropdownUser3" data-bs-toggle="dropdown" aria-expanded="false"> + <img src="https://github.com/mdo.png" alt="mdo" width="24" height="24" class="rounded-circle"> + </a> + <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser3"> + <li><a class="dropdown-item" href="#">New project...</a></li> + <li><a class="dropdown-item" href="#">Settings</a></li> + <li><a class="dropdown-item" href="#">Profile</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Sign out</a></li> + </ul> + </div> </div> -</div> -<div class="b-example-divider"></div> + <div class="b-example-divider"></div> -<div class="p-3 bg-white" style="width: 280px;"> - <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"> - <svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg> - <span class="fs-5 fw-semibold">Collapsible</span> - </a> - <ul class="list-unstyled ps-0"> - <li class="mb-1"> - <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="true"> - Home - </button> - <div class="collapse show" id="home-collapse"> - <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> - <li><a href="#" class="link-dark rounded">Overview</a></li> - <li><a href="#" class="link-dark rounded">Updates</a></li> - <li><a href="#" class="link-dark rounded">Reports</a></li> - </ul> - </div> - </li> - <li class="mb-1"> - <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false"> - Dashboard - </button> - <div class="collapse" id="dashboard-collapse"> - <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> - <li><a href="#" class="link-dark rounded">Overview</a></li> - <li><a href="#" class="link-dark rounded">Weekly</a></li> - <li><a href="#" class="link-dark rounded">Monthly</a></li> - <li><a href="#" class="link-dark rounded">Annually</a></li> - </ul> - </div> - </li> - <li class="mb-1"> - <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false"> - Orders - </button> - <div class="collapse" id="orders-collapse"> - <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> - <li><a href="#" class="link-dark rounded">New</a></li> - <li><a href="#" class="link-dark rounded">Processed</a></li> - <li><a href="#" class="link-dark rounded">Shipped</a></li> - <li><a href="#" class="link-dark rounded">Returned</a></li> - </ul> - </div> - </li> - <li class="border-top my-3"></li> - <li class="mb-1"> - <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false"> - Account - </button> - <div class="collapse" id="account-collapse"> - <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> - <li><a href="#" class="link-dark rounded">New...</a></li> - <li><a href="#" class="link-dark rounded">Profile</a></li> - <li><a href="#" class="link-dark rounded">Settings</a></li> - <li><a href="#" class="link-dark rounded">Sign out</a></li> - </ul> - </div> - </li> - </ul> -</div> + <div class="p-3 bg-white" style="width: 280px;"> + <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"> + <svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg> + <span class="fs-5 fw-semibold">Collapsible</span> + </a> + <ul class="list-unstyled ps-0"> + <li class="mb-1"> + <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="true"> + Home + </button> + <div class="collapse show" id="home-collapse"> + <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> + <li><a href="#" class="link-dark rounded">Overview</a></li> + <li><a href="#" class="link-dark rounded">Updates</a></li> + <li><a href="#" class="link-dark rounded">Reports</a></li> + </ul> + </div> + </li> + <li class="mb-1"> + <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false"> + Dashboard + </button> + <div class="collapse" id="dashboard-collapse"> + <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> + <li><a href="#" class="link-dark rounded">Overview</a></li> + <li><a href="#" class="link-dark rounded">Weekly</a></li> + <li><a href="#" class="link-dark rounded">Monthly</a></li> + <li><a href="#" class="link-dark rounded">Annually</a></li> + </ul> + </div> + </li> + <li class="mb-1"> + <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false"> + Orders + </button> + <div class="collapse" id="orders-collapse"> + <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> + <li><a href="#" class="link-dark rounded">New</a></li> + <li><a href="#" class="link-dark rounded">Processed</a></li> + <li><a href="#" class="link-dark rounded">Shipped</a></li> + <li><a href="#" class="link-dark rounded">Returned</a></li> + </ul> + </div> + </li> + <li class="border-top my-3"></li> + <li class="mb-1"> + <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false"> + Account + </button> + <div class="collapse" id="account-collapse"> + <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> + <li><a href="#" class="link-dark rounded">New...</a></li> + <li><a href="#" class="link-dark rounded">Profile</a></li> + <li><a href="#" class="link-dark rounded">Settings</a></li> + <li><a href="#" class="link-dark rounded">Sign out</a></li> + </ul> + </div> + </li> + </ul> + </div> -<div class="b-example-divider"></div> + <div class="b-example-divider"></div> -<div class="d-flex flex-column align-items-stretch bg-white" style="width: 380px;"> - <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom"> - <svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg> - <span class="fs-5 fw-semibold">List group</span> - </a> - <div class="list-group list-group-flush border-bottom scrollarea"> - <a href="#" class="list-group-item list-group-item-action active py-3 lh-tight" aria-current="true"> - <div class="d-flex w-100 align-items-center justify-content-between"> - <strong class="mb-1">List group item heading</strong> - <small>Wed</small> - </div> - <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> - </a> - <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> - <div class="d-flex w-100 align-items-center justify-content-between"> - <strong class="mb-1">List group item heading</strong> - <small class="text-muted">Tues</small> - </div> - <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> - </a> - <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> - <div class="d-flex w-100 align-items-center justify-content-between"> - <strong class="mb-1">List group item heading</strong> - <small class="text-muted">Mon</small> - </div> - <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + <div class="d-flex flex-column align-items-stretch bg-white" style="width: 380px;"> + <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom"> + <svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg> + <span class="fs-5 fw-semibold">List group</span> </a> + <div class="list-group list-group-flush border-bottom scrollarea"> + <a href="#" class="list-group-item list-group-item-action active py-3 lh-tight" aria-current="true"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small>Wed</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Tues</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Mon</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> - <a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true"> - <div class="d-flex w-100 align-items-center justify-content-between"> - <strong class="mb-1">List group item heading</strong> - <small class="text-muted">Wed</small> - </div> - <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> - </a> - <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> - <div class="d-flex w-100 align-items-center justify-content-between"> - <strong class="mb-1">List group item heading</strong> - <small class="text-muted">Tues</small> - </div> - <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> - </a> - <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> - <div class="d-flex w-100 align-items-center justify-content-between"> - <strong class="mb-1">List group item heading</strong> - <small class="text-muted">Mon</small> - </div> - <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> - </a> - <a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true"> - <div class="d-flex w-100 align-items-center justify-content-between"> - <strong class="mb-1">List group item heading</strong> - <small class="text-muted">Wed</small> - </div> - <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> - </a> - <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> - <div class="d-flex w-100 align-items-center justify-content-between"> - <strong class="mb-1">List group item heading</strong> - <small class="text-muted">Tues</small> - </div> - <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> - </a> - <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> - <div class="d-flex w-100 align-items-center justify-content-between"> - <strong class="mb-1">List group item heading</strong> - <small class="text-muted">Mon</small> - </div> - <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> - </a> - <a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true"> - <div class="d-flex w-100 align-items-center justify-content-between"> - <strong class="mb-1">List group item heading</strong> - <small class="text-muted">Wed</small> - </div> - <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> - </a> - <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> - <div class="d-flex w-100 align-items-center justify-content-between"> - <strong class="mb-1">List group item heading</strong> - <small class="text-muted">Tues</small> - </div> - <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> - </a> - <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> - <div class="d-flex w-100 align-items-center justify-content-between"> - <strong class="mb-1">List group item heading</strong> - <small class="text-muted">Mon</small> - </div> - <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> - </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Wed</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Tues</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Mon</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Wed</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Tues</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Mon</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Wed</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Tues</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Mon</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + </div> </div> -</div> -<div class="b-example-divider"></div> + <div class="b-example-divider"></div> +</main> diff --git a/site/content/docs/5.0/examples/sidebars/sidebars.css b/site/content/docs/5.0/examples/sidebars/sidebars.css index d034f3af15..22678b93a0 100644 --- a/site/content/docs/5.0/examples/sidebars/sidebars.css +++ b/site/content/docs/5.0/examples/sidebars/sidebars.css @@ -1,4 +1,4 @@ -body { +main { display: flex; flex-wrap: nowrap; height: 100vh; @@ -6,7 +6,7 @@ body { overflow-x: auto; overflow-y: hidden; } -body > * { +main > * { flex-shrink: 0; min-height: -webkit-fill-available; } diff --git a/site/content/docs/5.0/examples/starter-template/index.html b/site/content/docs/5.0/examples/starter-template/index.html index fdd233b7c3..48a5cbfad5 100644 --- a/site/content/docs/5.0/examples/starter-template/index.html +++ b/site/content/docs/5.0/examples/starter-template/index.html @@ -13,37 +13,38 @@ extra_css: </a> </header> - <h1>Get started with Bootstrap</h1> - <p class="fs-5 col-md-8">Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.</p> + <main> + <h1>Get started with Bootstrap</h1> + <p class="fs-5 col-md-8">Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.</p> - <div class="mb-5"> - <a href="{{< docsref "/examples" >}}" class="btn btn-primary btn-lg px-4">Download examples</a> - </div> + <div class="mb-5"> + <a href="{{< docsref "/examples" >}}" class="btn btn-primary btn-lg px-4">Download examples</a> + </div> - <hr class="col-3 col-md-2 mb-5"> + <hr class="col-3 col-md-2 mb-5"> - <div class="row g-5"> - <div class="col-md-6"> - <h2>Starter projects</h2> - <p>Ready to beyond the starter template? Check out these open source projects that you can quickly duplicate to a new GitHub repository.</p> - <ul class="icon-list"> - <li><a href="https://github.com/twbs/bootstrap-npm-starter" rel="noopener" target="_blank">Bootstrap npm starter</a></li> - <li class="text-muted">Bootstrap Parcel starter (coming soon!)</li> - </ul> - </div> + <div class="row g-5"> + <div class="col-md-6"> + <h2>Starter projects</h2> + <p>Ready to beyond the starter template? Check out these open source projects that you can quickly duplicate to a new GitHub repository.</p> + <ul class="icon-list"> + <li><a href="https://github.com/twbs/bootstrap-npm-starter" rel="noopener" target="_blank">Bootstrap npm starter</a></li> + <li class="text-muted">Bootstrap Parcel starter (coming soon!)</li> + </ul> + </div> - <div class="col-md-6"> - <h2>Guides</h2> - <p>Read more detailed instructions and documentation on using or contributing to Bootstrap.</p> - <ul class="icon-list"> - <li><a href="{{< docsref "/getting-started/introduction" >}}">Bootstrap quick start guide</a></li> - <li><a href="{{< docsref "/getting-started/webpack" >}}">Bootstrap Webpack guide</a></li> - <li><a href="{{< docsref "/getting-started/parcel" >}}">Bootstrap Parcel guide</a></li> - <li><a href="{{< docsref "/getting-started/build-tools" >}}">Contributing to Bootstrap</a></li> - </ul> + <div class="col-md-6"> + <h2>Guides</h2> + <p>Read more detailed instructions and documentation on using or contributing to Bootstrap.</p> + <ul class="icon-list"> + <li><a href="{{< docsref "/getting-started/introduction" >}}">Bootstrap quick start guide</a></li> + <li><a href="{{< docsref "/getting-started/webpack" >}}">Bootstrap Webpack guide</a></li> + <li><a href="{{< docsref "/getting-started/parcel" >}}">Bootstrap Parcel guide</a></li> + <li><a href="{{< docsref "/getting-started/build-tools" >}}">Contributing to Bootstrap</a></li> + </ul> + </div> </div> - </div> - + </main> <footer class="pt-5 my-5 text-muted border-top"> Created by the Bootstrap team · © {{< year >}} </footer> |