rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

docs(examples): ensure content sits in landmarks (#31579)

Browse Source
This commit is contained in:
Gaël Poupard 2020-09-10 11:39:29 +02:00 committed by GitHub
parent 28a92234e5
commit b2d7d29f6d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 853 additions and 841 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
site/content/docs/5.0/examples/blog/index.html
View File

@ -41,7 +41,9 @@ include_js: false
<a class="p-2 link-secondary" href="#">Travel</a> <a class="p-2 link-secondary" href="#">Travel</a>
</nav> </nav>
</div> </div>
</div>
<main class="container">
<div class="p-4 p-md-5 mb-4 text-white rounded bg-dark"> <div class="p-4 p-md-5 mb-4 text-white rounded bg-dark">
<div class="col-md-6 px-0"> <div class="col-md-6 px-0">
<h1 class="display-4 font-italic">Title of a longer featured blog post</h1> <h1 class="display-4 font-italic">Title of a longer featured blog post</h1>
@ -80,16 +82,14 @@ include_js: false
</div> </div>
</div> </div>
</div> </div>
</div>
<main class="container">
<div class="row"> <div class="row">
<div class="col-md-8"> <div class="col-md-8">
<h3 class="pb-4 mb-4 font-italic border-bottom"> <h3 class="pb-4 mb-4 font-italic border-bottom">
From the Firehose From the Firehose
</h3> </h3>
<div class="blog-post"> <article class="blog-post">
<h2 class="blog-post-title">Sample blog post</h2> <h2 class="blog-post-title">Sample blog post</h2>
<p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p> <p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
@ -120,9 +120,9 @@ include_js: false
<li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li> <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
</ol> </ol>
<p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p> <p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p>
</div><!-- /.blog-post --> </article><!-- /.blog-post -->
<div class="blog-post"> <article class="blog-post">
<h2 class="blog-post-title">Another blog post</h2> <h2 class="blog-post-title">Another blog post</h2>
<p class="blog-post-meta">December 23, 2013 by <a href="#">Jacob</a></p> <p class="blog-post-meta">December 23, 2013 by <a href="#">Jacob</a></p>
@ -132,9 +132,9 @@ include_js: false
</blockquote> </blockquote>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div><!-- /.blog-post --> </article><!-- /.blog-post -->
<div class="blog-post"> <article class="blog-post">
<h2 class="blog-post-title">New feature</h2> <h2 class="blog-post-title">New feature</h2>
<p class="blog-post-meta">December 14, 2013 by <a href="#">Chris</a></p> <p class="blog-post-meta">December 14, 2013 by <a href="#">Chris</a></p>
@ -146,16 +146,16 @@ include_js: false
</ul> </ul>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p> <p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
</div><!-- /.blog-post --> </article><!-- /.blog-post -->
<nav class="blog-pagination"> <nav class="blog-pagination" aria-label="Pagination">
<a class="btn btn-outline-primary" href="#">Older</a> <a class="btn btn-outline-primary" href="#">Older</a>
<a class="btn btn-outline-secondary disabled" href="#" tabindex="-1" aria-disabled="true">Newer</a> <a class="btn btn-outline-secondary disabled" href="#" tabindex="-1" aria-disabled="true">Newer</a>
</nav> </nav>
</div> </div>
<aside class="col-md-4"> <div class="col-md-4">
<div class="p-4 mb-3 bg-light rounded"> <div class="p-4 mb-3 bg-light rounded">
<h4 class="font-italic">About</h4> <h4 class="font-italic">About</h4>
<p class="mb-0">Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> <p class="mb-0">Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
@ -187,7 +187,7 @@ include_js: false
<li><a href="#">Facebook</a></li> <li><a href="#">Facebook</a></li>
</ol> </ol>
</div> </div>
</aside> </div>
</div><!-- /.row --> </div><!-- /.row -->

376
site/content/docs/5.0/examples/checkout/index.html
View File

@ -9,215 +9,217 @@ body_class: "bg-light"
--- ---
<div class="container"> <div class="container">
<div class="py-5 text-center"> <main>
<img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57"> <div class="py-5 text-center">
<h2>Checkout form</h2> <img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
<p class="lead">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> <h2>Checkout form</h2>
</div> <p class="lead">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 class="row g-3">
<div class="col-md-5 col-lg-4 order-md-last">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-muted">Your cart</span>
<span class="badge bg-secondary rounded-pill">3</span>
</h4>
<ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-sm">
<div>
<h6 class="my-0">Product name</h6>
<small class="text-muted">Brief description</small>
</div>
<span class="text-muted">$12</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-sm">
<div>
<h6 class="my-0">Second product</h6>
<small class="text-muted">Brief description</small>
</div>
<span class="text-muted">$8</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-sm">
<div>
<h6 class="my-0">Third item</h6>
<small class="text-muted">Brief description</small>
</div>
<span class="text-muted">$5</span>
</li>
<li class="list-group-item d-flex justify-content-between bg-light">
<div class="text-success">
<h6 class="my-0">Promo code</h6>
<small>EXAMPLECODE</small>
</div>
<span class="text-success">−$5</span>
</li>
<li class="list-group-item d-flex justify-content-between">
<span>Total (USD)</span>
<strong>$20</strong>
</li>
</ul>
<form class="card p-2">
<div class="input-group">
<input type="text" class="form-control" placeholder="Promo code">
<button type="submit" class="btn btn-secondary">Redeem</button>
</div>
</form>
</div> </div>
<div class="col-md-7 col-lg-8">
<h4 class="mb-3">Billing address</h4>
<form class="needs-validation" novalidate>
<div class="row g-3">
<div class="col-sm-6">
<label for="firstName" class="form-label">First name</label>
<input type="text" class="form-control" id="firstName" placeholder="" value="" required>
<div class="invalid-feedback">
Valid first name is required.
</div>
</div>
<div class="col-sm-6"> <div class="row g-3">
<label for="lastName" class="form-label">Last name</label> <div class="col-md-5 col-lg-4 order-md-last">
<input type="text" class="form-control" id="lastName" placeholder="" value="" required> <h4 class="d-flex justify-content-between align-items-center mb-3">
<div class="invalid-feedback"> <span class="text-muted">Your cart</span>
Valid last name is required. <span class="badge bg-secondary rounded-pill">3</span>
</h4>
<ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-sm">
<div>
<h6 class="my-0">Product name</h6>
<small class="text-muted">Brief description</small>
</div> </div>
</div> <span class="text-muted">$12</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-sm">
<div>
<h6 class="my-0">Second product</h6>
<small class="text-muted">Brief description</small>
</div>
<span class="text-muted">$8</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-sm">
<div>
<h6 class="my-0">Third item</h6>
<small class="text-muted">Brief description</small>
</div>
<span class="text-muted">$5</span>
</li>
<li class="list-group-item d-flex justify-content-between bg-light">
<div class="text-success">
<h6 class="my-0">Promo code</h6>
<small>EXAMPLECODE</small>
</div>
<span class="text-success">−$5</span>
</li>
<li class="list-group-item d-flex justify-content-between">
<span>Total (USD)</span>
<strong>$20</strong>
</li>
</ul>
<div class="col-12"> <form class="card p-2">
<label for="username" class="form-label">Username</label> <div class="input-group">
<div class="input-group"> <input type="text" class="form-control" placeholder="Promo code">
<span class="input-group-text">@</span> <button type="submit" class="btn btn-secondary">Redeem</button>
<input type="text" class="form-control" id="username" placeholder="Username" required> </div>
<div class="invalid-feedback"> </form>
Your username is required. </div>
<div class="col-md-7 col-lg-8">
<h4 class="mb-3">Billing address</h4>
<form class="needs-validation" novalidate>
<div class="row g-3">
<div class="col-sm-6">
<label for="firstName" class="form-label">First name</label>
<input type="text" class="form-control" id="firstName" placeholder="" value="" required>
<div class="invalid-feedback">
Valid first name is required.
</div>
</div>
<div class="col-sm-6">
<label for="lastName" class="form-label">Last name</label>
<input type="text" class="form-control" id="lastName" placeholder="" value="" required>
<div class="invalid-feedback">
Valid last name is required.
</div>
</div>
<div class="col-12">
<label for="username" class="form-label">Username</label>
<div class="input-group">
<span class="input-group-text">@</span>
<input type="text" class="form-control" id="username" placeholder="Username" required>
<div class="invalid-feedback">
Your username is required.
</div>
</div>
</div>
<div class="col-12">
<label for="email" class="form-label">Email <span class="text-muted">(Optional)</span></label>
<input type="email" class="form-control" id="email" placeholder="you@example.com">
<div class="invalid-feedback">
Please enter a valid email address for shipping updates.
</div>
</div>
<div class="col-12">
<label for="address" class="form-label">Address</label>
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
<div class="invalid-feedback">
Please enter your shipping address.
</div>
</div>
<div class="col-12">
<label for="address2" class="form-label">Address 2 <span class="text-muted">(Optional)</span></label>
<input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
</div>
<div class="col-md-5">
<label for="country" class="form-label">Country</label>
<select class="form-select" id="country" required>
<option value="">Choose...</option>
<option>United States</option>
</select>
<div class="invalid-feedback">
Please select a valid country.
</div>
</div>
<div class="col-md-4">
<label for="state" class="form-label">State</label>
<select class="form-select" id="state" required>
<option value="">Choose...</option>
<option>California</option>
</select>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3">
<label for="zip" class="form-label">Zip</label>
<input type="text" class="form-control" id="zip" placeholder="" required>
<div class="invalid-feedback">
Zip code required.
</div> </div>
</div> </div>
</div> </div>
<div class="col-12"> <hr class="my-4">
<label for="email" class="form-label">Email <span class="text-muted">(Optional)</span></label>
<input type="email" class="form-control" id="email" placeholder="you@example.com">
<div class="invalid-feedback">
Please enter a valid email address for shipping updates.
</div>
</div>
<div class="col-12">
<label for="address" class="form-label">Address</label>
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
<div class="invalid-feedback">
Please enter your shipping address.
</div>
</div>
<div class="col-12">
<label for="address2" class="form-label">Address 2 <span class="text-muted">(Optional)</span></label>
<input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
</div>
<div class="col-md-5">
<label for="country" class="form-label">Country</label>
<select class="form-select" id="country" required>
<option value="">Choose...</option>
<option>United States</option>
</select>
<div class="invalid-feedback">
Please select a valid country.
</div>
</div>
<div class="col-md-4">
<label for="state" class="form-label">State</label>
<select class="form-select" id="state" required>
<option value="">Choose...</option>
<option>California</option>
</select>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3">
<label for="zip" class="form-label">Zip</label>
<input type="text" class="form-control" id="zip" placeholder="" required>
<div class="invalid-feedback">
Zip code required.
</div>
</div>
</div>
<hr class="my-4">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="same-address">
<label class="form-check-label" for="same-address">Shipping address is the same as my billing address</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="save-info">
<label class="form-check-label" for="save-info">Save this information for next time</label>
</div>
<hr class="my-4">
<h4 class="mb-3">Payment</h4>
<div class="my-3">
<div class="form-check"> <div class="form-check">
<input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required> <input type="checkbox" class="form-check-input" id="same-address">
<label class="form-check-label" for="credit">Credit card</label> <label class="form-check-label" for="same-address">Shipping address is the same as my billing address</label>
</div> </div>
<div class="form-check"> <div class="form-check">
<input id="debit" name="paymentMethod" type="radio" class="form-check-input" required> <input type="checkbox" class="form-check-input" id="save-info">
<label class="form-check-label" for="debit">Debit card</label> <label class="form-check-label" for="save-info">Save this information for next time</label>
</div> </div>
<div class="form-check">
<input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required>
<label class="form-check-label" for="paypal">PayPal</label>
</div>
</div>
<div class="row gy-3"> <hr class="my-4">
<div class="col-md-6">
<label for="cc-name" class="form-label">Name on card</label> <h4 class="mb-3">Payment</h4>
<input type="text" class="form-control" id="cc-name" placeholder="" required>
<small class="text-muted">Full name as displayed on card</small> <div class="my-3">
<div class="invalid-feedback"> <div class="form-check">
Name on card is required <input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
<label class="form-check-label" for="credit">Credit card</label>
</div>
<div class="form-check">
<input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>
<label class="form-check-label" for="debit">Debit card</label>
</div>
<div class="form-check">
<input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required>
<label class="form-check-label" for="paypal">PayPal</label>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="row gy-3">
<label for="cc-number" class="form-label">Credit card number</label> <div class="col-md-6">
<input type="text" class="form-control" id="cc-number" placeholder="" required> <label for="cc-name" class="form-label">Name on card</label>
<div class="invalid-feedback"> <input type="text" class="form-control" id="cc-name" placeholder="" required>
Credit card number is required <small class="text-muted">Full name as displayed on card</small>
<div class="invalid-feedback">
Name on card is required
</div>
</div>
<div class="col-md-6">
<label for="cc-number" class="form-label">Credit card number</label>
<input type="text" class="form-control" id="cc-number" placeholder="" required>
<div class="invalid-feedback">
Credit card number is required
</div>
</div>
<div class="col-md-3">
<label for="cc-expiration" class="form-label">Expiration</label>
<input type="text" class="form-control" id="cc-expiration" placeholder="" required>
<div class="invalid-feedback">
Expiration date required
</div>
</div>
<div class="col-md-3">
<label for="cc-cvv" class="form-label">CVV</label>
<input type="text" class="form-control" id="cc-cvv" placeholder="" required>
<div class="invalid-feedback">
Security code required
</div>
</div> </div>
</div> </div>
<div class="col-md-3"> <hr class="my-4">
<label for="cc-expiration" class="form-label">Expiration</label>
<input type="text" class="form-control" id="cc-expiration" placeholder="" required>
<div class="invalid-feedback">
Expiration date required
</div>
</div>
<div class="col-md-3"> <button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
<label for="cc-cvv" class="form-label">CVV</label> </form>
<input type="text" class="form-control" id="cc-cvv" placeholder="" required> </div>
<div class="invalid-feedback">
Security code required
</div>
</div>
</div>
<hr class="my-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
</form>
</div> </div>
</div> </main>
<footer class="my-5 pt-5 text-muted text-center text-small"> <footer class="my-5 pt-5 text-muted text-center text-small">
<p class="mb-1">&copy; 2017–{{< year >}} Company Name</p> <p class="mb-1">&copy; 2017–{{< year >}} Company Name</p>

4
site/content/docs/5.0/examples/dashboard/index.html
View File

@ -11,7 +11,7 @@ extra_js:
- src: "dashboard.js" - src: "dashboard.js"
--- ---
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow"> <header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">Company name</a> <a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">Company name</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -22,7 +22,7 @@ extra_js:
<a class="nav-link" href="#">Sign out</a> <a class="nav-link" href="#">Sign out</a>
</li> </li>
</ul> </ul>
</nav> </header>
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">

46
site/content/docs/5.0/examples/floating-labels/index.html
View File

@ -6,28 +6,30 @@ extra_css:
include_js: false include_js: false
--- ---
<form class="form-signin"> <main class="form-signin">
<div class="text-center mb-4"> <form>
<img class="mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57"> <div class="text-center mb-4">
<h1 class="h3 mb-3 font-weight-normal">Floating labels</h1> <img class="mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
<p>Build form controls with floating labels via the <code>:placeholder-shown</code> pseudo-element. <a href="https://caniuse.com/#feat=css-placeholder-shown">Works in latest Chrome, Safari, and Firefox.</a></p> <h1 class="h3 mb-3 font-weight-normal">Floating labels</h1>
</div> <p>Build form controls with floating labels via the <code>:placeholder-shown</code> pseudo-element. <a href="https://caniuse.com/#feat=css-placeholder-shown">Works in latest Chrome, Safari, and Firefox.</a></p>
</div>
<div class="form-label-group"> <div class="form-label-group">
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus> <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputEmail">Email address</label> <label for="inputEmail">Email address</label>
</div> </div>
<div class="form-label-group"> <div class="form-label-group">
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required> <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<label for="inputPassword">Password</label> <label for="inputPassword">Password</label>
</div> </div>
<div class="checkbox mb-3"> <div class="checkbox mb-3">
<label> <label>
<input type="checkbox" value="remember-me"> Remember me <input type="checkbox" value="remember-me"> Remember me
</label> </label>
</div> </div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted text-center">&copy; 2017-{{< year >}}</p> <p class="mt-5 mb-3 text-muted text-center">&copy; 2017-{{< year >}}</p>
</form> </form>
</main>

338
site/content/docs/5.0/examples/grid/index.html
View File

@ -7,180 +7,182 @@ body_class: "py-4"
include_js: false include_js: false
--- ---
<div class="container"> <main>
<div class="container">
<h1>Bootstrap grid examples</h1> <h1>Bootstrap grid examples</h1>
<p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p> <p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
<p>In these examples the <code>.themed-grid-col</code> class is added to the columns to add some theming. This is not a class that is available in Bootstrap by default.</p> <p>In these examples the <code>.themed-grid-col</code> class is added to the columns to add some theming. This is not a class that is available in Bootstrap by default.</p>
<h2 class="mt-4">Five grid tiers</h2> <h2 class="mt-4">Five grid tiers</h2>
<p>There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.</p> <p>There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.</p>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-4 themed-grid-col">.col-4</div> <div class="col-4 themed-grid-col">.col-4</div>
<div class="col-4 themed-grid-col">.col-4</div> <div class="col-4 themed-grid-col">.col-4</div>
<div class="col-4 themed-grid-col">.col-4</div> <div class="col-4 themed-grid-col">.col-4</div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-sm-4 themed-grid-col">.col-sm-4</div> <div class="col-sm-4 themed-grid-col">.col-sm-4</div>
<div class="col-sm-4 themed-grid-col">.col-sm-4</div> <div class="col-sm-4 themed-grid-col">.col-sm-4</div>
<div class="col-sm-4 themed-grid-col">.col-sm-4</div> <div class="col-sm-4 themed-grid-col">.col-sm-4</div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-4 themed-grid-col">.col-md-4</div> <div class="col-md-4 themed-grid-col">.col-md-4</div>
<div class="col-md-4 themed-grid-col">.col-md-4</div> <div class="col-md-4 themed-grid-col">.col-md-4</div>
<div class="col-md-4 themed-grid-col">.col-md-4</div> <div class="col-md-4 themed-grid-col">.col-md-4</div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-lg-4 themed-grid-col">.col-lg-4</div> <div class="col-lg-4 themed-grid-col">.col-lg-4</div>
<div class="col-lg-4 themed-grid-col">.col-lg-4</div> <div class="col-lg-4 themed-grid-col">.col-lg-4</div>
<div class="col-lg-4 themed-grid-col">.col-lg-4</div> <div class="col-lg-4 themed-grid-col">.col-lg-4</div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-xl-4 themed-grid-col">.col-xl-4</div> <div class="col-xl-4 themed-grid-col">.col-xl-4</div>
<div class="col-xl-4 themed-grid-col">.col-xl-4</div> <div class="col-xl-4 themed-grid-col">.col-xl-4</div>
<div class="col-xl-4 themed-grid-col">.col-xl-4</div> <div class="col-xl-4 themed-grid-col">.col-xl-4</div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div> <div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div> <div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div> <div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
</div> </div>
<h2 class="mt-4">Three equal columns</h2> <h2 class="mt-4">Three equal columns</h2>
<p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p> <p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-4 themed-grid-col">.col-md-4</div> <div class="col-md-4 themed-grid-col">.col-md-4</div>
<div class="col-md-4 themed-grid-col">.col-md-4</div> <div class="col-md-4 themed-grid-col">.col-md-4</div>
<div class="col-md-4 themed-grid-col">.col-md-4</div> <div class="col-md-4 themed-grid-col">.col-md-4</div>
</div> </div>
<h2 class="mt-4">Three equal columns alternative</h2> <h2 class="mt-4">Three equal columns alternative</h2>
<p>By using the <code>.row-cols-*</code> classes, you can easily create a grid with equal columns.</p> <p>By using the <code>.row-cols-*</code> classes, you can easily create a grid with equal columns.</p>
<div class="row row-cols-md-3 mb-3"> <div class="row row-cols-md-3 mb-3">
<div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div> <div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
<div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div> <div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
<div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div> <div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
</div> </div>
<h2 class="mt-4">Three unequal columns</h2> <h2 class="mt-4">Three unequal columns</h2>
<p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.</p> <p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.</p>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-3 themed-grid-col">.col-md-3</div> <div class="col-md-3 themed-grid-col">.col-md-3</div>
<div class="col-md-6 themed-grid-col">.col-md-6</div> <div class="col-md-6 themed-grid-col">.col-md-6</div>
<div class="col-md-3 themed-grid-col">.col-md-3</div> <div class="col-md-3 themed-grid-col">.col-md-3</div>
</div> </div>
<h2 class="mt-4">Two columns</h2> <h2 class="mt-4">Two columns</h2>
<p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p> <p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-8 themed-grid-col">.col-md-8</div> <div class="col-md-8 themed-grid-col">.col-md-8</div>
<div class="col-md-4 themed-grid-col">.col-md-4</div> <div class="col-md-4 themed-grid-col">.col-md-4</div>
</div> </div>
<h2 class="mt-4">Full width, single column</h2> <h2 class="mt-4">Full width, single column</h2>
<p class="text-warning"> <p class="text-warning">
No grid classes are necessary for full-width elements. No grid classes are necessary for full-width elements.
</p> </p>
<hr class="my-4"> <hr class="my-4">
<h2 class="mt-4">Two columns with two nested columns</h2> <h2 class="mt-4">Two columns with two nested columns</h2>
<p>Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.</p> <p>Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.</p>
<p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p> <p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-8 themed-grid-col"> <div class="col-md-8 themed-grid-col">
<div class="pb-3"> <div class="pb-3">
.col-md-8 .col-md-8
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6 themed-grid-col">.col-md-6</div> <div class="col-md-6 themed-grid-col">.col-md-6</div>
<div class="col-md-6 themed-grid-col">.col-md-6</div> <div class="col-md-6 themed-grid-col">.col-md-6</div>
</div> </div>
</div>
<div class="col-md-4 themed-grid-col">.col-md-4</div>
</div>
<hr class="my-4">
<h2 class="mt-4">Mixed: mobile and desktop</h2>
<p>The Bootstrap v4 grid system has five tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
<p>Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg and xl, you only need to specify md.</p>
<div class="row mb-3">
<div class="col-md-8 themed-grid-col">.col-md-8</div>
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
</div>
<div class="row mb-3">
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
</div>
<div class="row mb-3">
<div class="col-6 themed-grid-col">.col-6</div>
<div class="col-6 themed-grid-col">.col-6</div>
</div>
<hr class="my-4">
<h2 class="mt-4">Mixed: mobile, tablet, and desktop</h2>
<div class="row mb-3">
<div class="col-sm-6 col-lg-8 themed-grid-col">.col-sm-6 .col-lg-8</div>
<div class="col-6 col-lg-4 themed-grid-col">.col-6 .col-lg-4</div>
</div>
<div class="row mb-3">
<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
</div>
<hr class="my-4">
<h2 class="mt-4">Gutters</h2>
<p>With <code>.gx-*</code> classes, the horizontal gutters can be adjusted.</p>
<div class="row row-cols-1 row-cols-md-3 gx-4">
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
</div>
<p class="mt-4">Use the <code>.gy-*</code> classes to control the vertical gutters.</p>
<div class="row row-cols-1 row-cols-md-3 gy-4">
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
</div>
<p class="mt-4">With <code>.g-*</code> classes, the gutters in both directions can be adjusted.</p>
<div class="row row-cols-1 row-cols-md-3 g-3">
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
</div> </div>
<div class="col-md-4 themed-grid-col">.col-md-4</div>
</div> </div>
<hr class="my-4"> <div class="container" id="containers">
<hr class="my-4">
<h2 class="mt-4">Mixed: mobile and desktop</h2> <h2 class="mt-4">Containers</h2>
<p>The Bootstrap v4 grid system has five tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p> <p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new <code>xxl</code> breakpoint.</p>
<p>Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg and xl, you only need to specify md.</p>
<div class="row mb-3">
<div class="col-md-8 themed-grid-col">.col-md-8</div>
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
</div>
<div class="row mb-3">
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
</div>
<div class="row mb-3">
<div class="col-6 themed-grid-col">.col-6</div>
<div class="col-6 themed-grid-col">.col-6</div>
</div> </div>
<hr class="my-4"> <div class="container themed-container">.container</div>
<div class="container-sm themed-container">.container-sm</div>
<h2 class="mt-4">Mixed: mobile, tablet, and desktop</h2> <div class="container-md themed-container">.container-md</div>
<div class="row mb-3"> <div class="container-lg themed-container">.container-lg</div>
<div class="col-sm-6 col-lg-8 themed-grid-col">.col-sm-6 .col-lg-8</div> <div class="container-xl themed-container">.container-xl</div>
<div class="col-6 col-lg-4 themed-grid-col">.col-6 .col-lg-4</div> <div class="container-xxl themed-container">.container-xxl</div>
</div> <div class="container-fluid themed-container">.container-fluid</div>
<div class="row mb-3"> </main>
<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
</div>
<hr class="my-4">
<h2 class="mt-4">Gutters</h2>
<p>With <code>.gx-*</code> classes, the horizontal gutters can be adjusted.</p>
<div class="row row-cols-1 row-cols-md-3 gx-4">
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
</div>
<p class="mt-4">Use the <code>.gy-*</code> classes to control the vertical gutters.</p>
<div class="row row-cols-1 row-cols-md-3 gy-4">
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
</div>
<p class="mt-4">With <code>.g-*</code> classes, the gutters in both directions can be adjusted.</p>
<div class="row row-cols-1 row-cols-md-3 g-3">
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
</div>
</div>
<div class="container" id="containers">
<hr class="my-4">
<h2 class="mt-4">Containers</h2>
<p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new <code>xxl</code> breakpoint.</p>
</div>
<div class="container themed-container">.container</div>
<div class="container-sm themed-container">.container-sm</div>
<div class="container-md themed-container">.container-md</div>
<div class="container-lg themed-container">.container-lg</div>
<div class="container-xl themed-container">.container-xl</div>
<div class="container-xxl themed-container">.container-xxl</div>
<div class="container-fluid themed-container">.container-fluid</div>

4
site/content/docs/5.0/examples/masonry/index.html
View File

@ -7,7 +7,7 @@ extra_js:
async: true async: true
--- ---
<div class="container py-5"> <main class="container py-5">
<h1>Bootstrap and Masonry</h1> <h1>Bootstrap and Masonry</h1>
<p class="lead">Integrate <a href="https://masonry.desandro.com/">Masonry</a> with the Bootstrap grid system and cards component.</p> <p class="lead">Integrate <a href="https://masonry.desandro.com/">Masonry</a> with the Bootstrap grid system and cards component.</p>
@ -102,4 +102,4 @@ extra_js:
</div> </div>
</div> </div>
</div> </main>

4
site/content/docs/5.0/examples/navbar-bottom/index.html
View File

@ -3,13 +3,13 @@ layout: examples
title: Bottom navbar example title: Bottom navbar example
--- ---
<div class="container"> <main class="container">
<div class="bg-light p-5 rounded mt-3"> <div class="bg-light p-5 rounded mt-3">
<h1>Bottom Navbar example</h1> <h1>Bottom Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how the bottom navbar works.</p> <p class="lead">This example is a quick exercise to illustrate how the bottom navbar works.</p>
<a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs &raquo;</a> <a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs &raquo;</a>
</div> </div>
</div> </main>
<nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark"> <nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid"> <div class="container-fluid">
<a class="navbar-brand" href="#">Bottom navbar</a> <a class="navbar-brand" href="#">Bottom navbar</a>

708
site/content/docs/5.0/examples/navbars/index.html
View File

@ -5,345 +5,16 @@ extra_css:
- "navbar.css" - "navbar.css"
--- ---
<nav class="navbar navbar-dark bg-dark"> <main>
<div class="container-fluid"> <nav class="navbar navbar-dark bg-dark" aria-label="First navbar example">
<a class="navbar-brand" href="#">Never expand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample01">
<ul class="navbar-nav mr-auto mb-2">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown01">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form>
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Always expand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample02">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<form>
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Expand at sm</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample03">
<ul class="navbar-nav mr-auto mb-2 mb-sm-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown03" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown03">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form>
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Expand at md</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample04">
<ul class="navbar-nav mr-auto mb-2 mb-md-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown04" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown04">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form>
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Expand at lg</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample05">
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown05" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown05">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form>
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-xl navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Expand at xl</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample06">
<ul class="navbar-nav mr-auto mb-2 mb-xl-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown06" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown06">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form>
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-xxl navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Expand at xxl</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleXxl" aria-controls="navbarsExampleXxl" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleXxl">
<ul class="navbar-nav mr-auto mb-2 mb-xl-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdownXxl" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdownXxl">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form>
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Container</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample07">
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown07" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown07">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form>
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-xl">
<a class="navbar-brand" href="#">Container XL</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07XL" aria-controls="navbarsExample07XL" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample07XL">
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown07XL" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown07XL">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form>
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</nav>
<div class="container-xl mb-4">
Matching .container-xl...
</div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Centered nav only</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown08">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
<div class="container-fluid"> <div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Never expand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarsExample09"> <div class="collapse navbar-collapse" id="navbarsExample01">
<ul class="navbar-nav mr-auto mb-2 mb-lg-0"> <ul class="navbar-nav mr-auto mb-2">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a> <a class="nav-link" aria-current="page" href="#">Home</a>
</li> </li>
@ -354,8 +25,8 @@ extra_css:
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown09" data-toggle="dropdown" aria-expanded="false">Dropdown</a> <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown09"> <ul class="dropdown-menu" aria-labelledby="dropdown01">
<li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li>
@ -369,13 +40,278 @@ extra_css:
</div> </div>
</nav> </nav>
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded"> <nav class="navbar navbar-expand navbar-dark bg-dark" aria-label="Second navbar example">
<div class="container-fluid"> <div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation"> <a class="navbar-brand" href="#">Always expand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample10"> <div class="collapse navbar-collapse" id="navbarsExample02">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<form>
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark" aria-label="Third navbar example">
<div class="container-fluid">
<a class="navbar-brand" href="#">Expand at sm</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample03">
<ul class="navbar-nav mr-auto mb-2 mb-sm-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown03" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown03">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form>
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-dark bg-dark" aria-label="Fourth navbar example">
<div class="container-fluid">
<a class="navbar-brand" href="#">Expand at md</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample04">
<ul class="navbar-nav mr-auto mb-2 mb-md-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown04" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown04">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form>
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Fifth navbar example">
<div class="container-fluid">
<a class="navbar-brand" href="#">Expand at lg</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample05">
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown05" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown05">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form>
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-xl navbar-dark bg-dark" aria-label="Sixth navbar example">
<div class="container-fluid">
<a class="navbar-brand" href="#">Expand at xl</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample06">
<ul class="navbar-nav mr-auto mb-2 mb-xl-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown06" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown06">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form>
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-xxl navbar-dark bg-dark" aria-label="Seventh navbar example">
<div class="container-fluid">
<a class="navbar-brand" href="#">Expand at xxl</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleXxl" aria-controls="navbarsExampleXxl" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleXxl">
<ul class="navbar-nav mr-auto mb-2 mb-xl-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdownXxl" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdownXxl">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form>
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Eighth navbar example">
<div class="container">
<a class="navbar-brand" href="#">Container</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample07">
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown07" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown07">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form>
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Ninth navbar example">
<div class="container-xl">
<a class="navbar-brand" href="#">Container XL</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07XL" aria-controls="navbarsExample07XL" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample07XL">
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown07XL" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown07XL">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form>
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</nav>
<div class="container-xl mb-4">
<p>Matching .container-xl...</p>
</div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Tenth navbar example">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Centered nav only</a> <a class="nav-link" aria-current="page" href="#">Centered nav only</a>
@ -387,8 +323,8 @@ extra_css:
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-toggle="dropdown" aria-expanded="false">Dropdown</a> <a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown10"> <ul class="dropdown-menu" aria-labelledby="dropdown08">
<li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li>
@ -399,16 +335,82 @@ extra_css:
</div> </div>
</nav> </nav>
<main> <div class="container">
<div class="bg-light p-5 rounded"> <nav class="navbar navbar-expand-lg navbar-light bg-light rounded" aria-label="Eleventh navbar example">
<div class="col-sm-8 mx-auto"> <div class="container-fluid">
<h1>Navbar examples</h1> <a class="navbar-brand" href="#">Navbar</a>
<p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="{{< docsref "/examples/navbar-static" >}}">top</a> and <a href="{{< docsref "/examples/navbar-fixed" >}}">fixed top</a> examples.</p> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p> <span class="navbar-toggler-icon"></span>
<p> </button>
<a class="btn btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs &raquo;</a>
</p> <div class="collapse navbar-collapse" id="navbarsExample09">
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown09" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown09">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form>
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded" aria-label="Twelfth navbar example">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample10">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Centered nav only</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown10">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div>
<div class="bg-light p-5 rounded">
<div class="col-sm-8 mx-auto">
<h1>Navbar examples</h1>
<p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="{{< docsref "/examples/navbar-static" >}}">top</a> and <a href="{{< docsref "/examples/navbar-fixed" >}}">fixed top</a> examples.</p>
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
<p>
<a class="btn btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs &raquo;</a>
</p>
</div>
</div> </div>
</div> </div>
</main> </div>
</div> </main>

10
site/content/docs/5.0/examples/offcanvas/index.html
View File

@ -8,10 +8,10 @@ extra_js:
body_class: "bg-light" body_class: "bg-light"
--- ---
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark"> <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation">
<div class="container-fluid"> <div class="container-fluid">
<a class="navbar-brand" href="#">Offcanvas navbar</a> <a class="navbar-brand" href="#">Offcanvas navbar</a>
<button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas"> <button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
@ -47,7 +47,7 @@ body_class: "bg-light"
</nav> </nav>
<div class="nav-scroller bg-white shadow-sm"> <div class="nav-scroller bg-white shadow-sm">
<nav class="nav nav-underline"> <nav class="nav nav-underline" aria-label="Secondary navigation">
<a class="nav-link active" aria-current="page" href="#">Dashboard</a> <a class="nav-link active" aria-current="page" href="#">Dashboard</a>
<a class="nav-link" href="#"> <a class="nav-link" href="#">
Friends Friends
@ -64,10 +64,10 @@ body_class: "bg-light"
</div> </div>
<main class="container"> <main class="container">
<div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded shadow-sm"> <div class="d-flex align-items-center p-3 my-3 text-white bg-purple rounded shadow-sm">
<img class="mr-3" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" alt="" width="48" height="38"> <img class="mr-3" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" alt="" width="48" height="38">
<div class="lh-1"> <div class="lh-1">
<h6 class="mb-0 text-white lh-1">Bootstrap</h6> <h1 class="h6 mb-0 text-white lh-1">Bootstrap</h1>
<small>Since 2011</small> <small>Since 2011</small>
</div> </div>
</div> </div>

18
site/content/docs/5.0/examples/pricing/index.html
View File

@ -6,8 +6,8 @@ extra_css:
include_js: false include_js: false
--- ---
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm"> <header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5> <p class="h5 my-0 mr-md-auto font-weight-normal">Company name</p>
<nav class="my-2 my-md-0 mr-md-3"> <nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#">Features</a> <a class="p-2 text-dark" href="#">Features</a>
<a class="p-2 text-dark" href="#">Enterprise</a> <a class="p-2 text-dark" href="#">Enterprise</a>
@ -15,14 +15,14 @@ include_js: false
<a class="p-2 text-dark" href="#">Pricing</a> <a class="p-2 text-dark" href="#">Pricing</a>
</nav> </nav>
<a class="btn btn-outline-primary" href="#">Sign up</a> <a class="btn btn-outline-primary" href="#">Sign up</a>
</div> </header>
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center"> <main class="container">
<h1 class="display-4">Pricing</h1> <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<p class="lead">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> <h1 class="display-4">Pricing</h1>
</div> <p class="lead">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="container">
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center"> <div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
<div class="col"> <div class="col">
<div class="card mb-4 shadow-sm"> <div class="card mb-4 shadow-sm">
@ -114,4 +114,4 @@ include_js: false
</div> </div>
</div> </div>
</footer> </footer>
</div> </main>

130
site/content/docs/5.0/examples/product/index.html
View File

@ -5,8 +5,8 @@ extra_css:
- "product.css" - "product.css"
--- ---
<nav class="site-header sticky-top py-1"> <header class="site-header sticky-top py-1">
<div class="container d-flex flex-column flex-md-row justify-content-between"> <nav class="container d-flex flex-column flex-md-row justify-content-between">
<a class="py-2" href="#" aria-label="Product"> <a class="py-2" href="#" aria-label="Product">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mx-auto" role="img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mx-auto" role="img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg>
</a> </a>
@ -17,86 +17,88 @@ extra_css:
<a class="py-2 d-none d-md-inline-block" href="#">Support</a> <a class="py-2 d-none d-md-inline-block" href="#">Support</a>
<a class="py-2 d-none d-md-inline-block" href="#">Pricing</a> <a class="py-2 d-none d-md-inline-block" href="#">Pricing</a>
<a class="py-2 d-none d-md-inline-block" href="#">Cart</a> <a class="py-2 d-none d-md-inline-block" href="#">Cart</a>
</div> </nav>
</nav> </header>
<div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light"> <main>
<div class="col-md-5 p-lg-5 mx-auto my-5"> <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
<h1 class="display-4 font-weight-normal">Punny headline</h1> <div class="col-md-5 p-lg-5 mx-auto my-5">
<p class="lead font-weight-normal">And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple’s marketing pages.</p> <h1 class="display-4 font-weight-normal">Punny headline</h1>
<a class="btn btn-outline-secondary" href="#">Coming soon</a> <p class="lead font-weight-normal">And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple’s marketing pages.</p>
<a class="btn btn-outline-secondary" href="#">Coming soon</a>
</div>
<div class="product-device shadow-sm d-none d-md-block"></div>
<div class="product-device product-device-2 shadow-sm d-none d-md-block"></div>
</div> </div>
<div class="product-device shadow-sm d-none d-md-block"></div>
<div class="product-device product-device-2 shadow-sm d-none d-md-block"></div>
</div>
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3"> <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
<div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden"> <div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
<div class="my-3 py-3"> <div class="my-3 py-3">
<h2 class="display-5">Another headline</h2> <h2 class="display-5">Another headline</h2>
<p class="lead">And an even wittier subheading.</p> <p class="lead">And an even wittier subheading.</p>
</div>
<div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div> </div>
<div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
</div> <div class="my-3 p-3">
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> <h2 class="display-5">Another headline</h2>
<div class="my-3 p-3"> <p class="lead">And an even wittier subheading.</p>
<h2 class="display-5">Another headline</h2> </div>
<p class="lead">And an even wittier subheading.</p> <div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div> </div>
<div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div> </div>
</div>
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3"> <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="my-3 p-3"> <div class="my-3 p-3">
<h2 class="display-5">Another headline</h2> <h2 class="display-5">Another headline</h2>
<p class="lead">And an even wittier subheading.</p> <p class="lead">And an even wittier subheading.</p>
</div>
<div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div> </div>
<div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> <div class="bg-primary mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
</div> <div class="my-3 py-3">
<div class="bg-primary mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden"> <h2 class="display-5">Another headline</h2>
<div class="my-3 py-3"> <p class="lead">And an even wittier subheading.</p>
<h2 class="display-5">Another headline</h2> </div>
<p class="lead">And an even wittier subheading.</p> <div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div> </div>
<div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div> </div>
</div>
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3"> <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="my-3 p-3"> <div class="my-3 p-3">
<h2 class="display-5">Another headline</h2> <h2 class="display-5">Another headline</h2>
<p class="lead">And an even wittier subheading.</p> <p class="lead">And an even wittier subheading.</p>
</div>
<div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div> </div>
<div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
</div> <div class="my-3 py-3">
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> <h2 class="display-5">Another headline</h2>
<div class="my-3 py-3"> <p class="lead">And an even wittier subheading.</p>
<h2 class="display-5">Another headline</h2> </div>
<p class="lead">And an even wittier subheading.</p> <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div> </div>
<div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div> </div>
</div>
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3"> <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="my-3 p-3"> <div class="my-3 p-3">
<h2 class="display-5">Another headline</h2> <h2 class="display-5">Another headline</h2>
<p class="lead">And an even wittier subheading.</p> <p class="lead">And an even wittier subheading.</p>
</div>
<div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div> </div>
<div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
</div> <div class="my-3 py-3">
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> <h2 class="display-5">Another headline</h2>
<div class="my-3 py-3"> <p class="lead">And an even wittier subheading.</p>
<h2 class="display-5">Another headline</h2> </div>
<p class="lead">And an even wittier subheading.</p> <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div> </div>
<div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div> </div>
</div> </main>
<footer class="container py-5"> <footer class="container py-5">
<div class="row"> <div class="row">

2
site/content/docs/5.0/examples/product/product.css
View File

@ -12,7 +12,7 @@
backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
} }
.site-header a { .site-header a {
color: #727272; color: #8e8e8e;
transition: color .15s ease-in-out; transition: color .15s ease-in-out;
} }
.site-header a:hover { .site-header a:hover {

32
site/content/docs/5.0/examples/sign-in/index.html
View File

@ -7,18 +7,20 @@ body_class: "text-center"
include_js: false include_js: false
--- ---
<form class="form-signin"> <main class="form-signin">
<img class="mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57"> <form>
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1> <img class="mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
<label for="inputEmail" class="visually-hidden">Email address</label> <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus> <label for="inputEmail" class="visually-hidden">Email address</label>
<label for="inputPassword" class="visually-hidden">Password</label> <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required> <label for="inputPassword" class="visually-hidden">Password</label>
<div class="checkbox mb-3"> <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<label> <div class="checkbox mb-3">
<input type="checkbox" value="remember-me"> Remember me <label>
</label> <input type="checkbox" value="remember-me"> Remember me
</div> </label>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> </div>
<p class="mt-5 mb-3 text-muted">&copy; 2017-{{< year >}}</p> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form> <p class="mt-5 mb-3 text-muted">&copy; 2017-{{< year >}}</p>
</form>
</main>