Commit df8f64d1 authored by Martijn Cuppens's avatar Martijn Cuppens
Browse files

Update examples to the Bootstrap 5 grid

parent 9daf36fd
main cleanup-floating-forms cssvar-function dependabot/npm_and_yarn/stylelint-and-stylelint-config-twbs-bootstrap-15.3.0 extend-snippets feat/data-target floating-always-visible floating-labels-icons fod-main-banner form-controls-with-icons github/fork/719media/patch-13 github/fork/719media/patch-14 github/fork/719media/patch-9 github/fork/ChellyAhmed/fix-typo-reboot.md github/fork/ChellyAhmed/offcanvas-scroll-back github/fork/CtrlAltLilith/main github/fork/Elysiome/offcanvas-optional-window-resizing github/fork/JanSargsyan/main github/fork/LunicLynx/support-different-line-height-for-buttons github/fork/Psixodelik/main github/fork/Ronid1/ronid1/offcanvas_static_backdrop github/fork/RyanBerliner/tooltip-accessibility github/fork/SantiagoPVazquez/Feature-default-border-bottom-to-dropdown-item github/fork/Sir-Genius/utils github/fork/Sumit-Singh-8/main github/fork/Viktor-VERA2020/offcanvas-slide github/fork/Zivangu9/input-group-for-form-control-plaintext github/fork/alpadev/alpadev/call-dispose-on-component-reinstantiation github/fork/astagi/fix/tree-shake-modules github/fork/compnerd/dark-accordion-icon github/fork/derSascha/dropdown-dont-close-on-input-click github/fork/dev-ph1l/main github/fork/donquixote/issue-33861-utl-mixin github/fork/florianlacreuse/mixin-make-row-gutter-y github/fork/gregorw/main github/fork/iteggmbh/transitionend-dispose-race github/fork/jdelStrother/patch-1 github/fork/jonnysp/form-floating github/fork/jonnysp/independent-offcanvas github/fork/jonnysp/theme-dark-on-card-and-modal-fix github/fork/josefdlange/floating-label-placeholder-opacity github/fork/julien-deramond/enhance-change-version.js github/fork/julien-deramond/main-jd-fix-offset-content github/fork/julien-deramond/main-jd-issue-with-utitlies github/fork/julien-deramond/main-xmr-pa11y-ci-jd-add-hideElements github/fork/kyletsang/fix-tooltip-padding github/fork/lacutah/CheckboxCenteringDocumentation github/fork/lekoala/patch-3 github/fork/louismaximepiton/main-kld-lmp-collapse-proposal github/fork/louismaximepiton/main-lmp-card-inner-border-radius-fix github/fork/louismaximepiton/main-lmp-carousel-multiple-images github/fork/louismaximepiton/main-lmp-css-var-init github/fork/louismaximepiton/main-lmp-disabled-floating-label-fix github/fork/louismaximepiton/main-lmp-input-range-fix github/fork/louismaximepiton/main-lmp-shift-color github/fork/louismaximepiton/main-lmp-table-active-tr-fix github/fork/maciek-szn/switch github/fork/michael-roth/feature/19964-multiple-tab-targets github/fork/mistic100/dom-utils github/fork/nkdas91/accordion github/fork/nstungcom/fix-missing-modal-open-class github/fork/oraliahdz/animation-utilities github/fork/pine3ree/patch-7 github/fork/pouwerkerk/unindent-scss-docs-shortcode github/fork/smares/smares-no-scolling-on-modal-close github/fork/tgm-git/patch-1 gs-forms gs-toasts-with-animated-progress-bar gs/add-history-helper gs/change-version-dir-on-docs gs/data-must-set-onlu-one-instance gs/docs/fix-drop-down-error gs/event-handler-2 gs/make-docs-js-build gs/make-simple-attribute-toggler gs/popover-fix-doc gs/provide-steConfig-method gs/scrollspy-smoothscroll-option-use-browser-history gs/streamline-jqueryInterface gs/support-drop-down-in-navbar gs/test-js-generic-trigger gs/try-web-components gs/tweak-collapse-js-selector gs/use-event-handler-in-cocmponent gs/use-rollup-replace-for-version jo-docs-thanks-page jo-ssr-friendly logical-props-spacing-utils main-fod-disabled-form-check-label main-fod-nested-accordion main-fod-simpler-table-structure main-fod-table-separator main-fod-utilities-contrast main-jd-abbr-title main-jd-add-chips main-jd-add-doc-for-sass-custom-colors main-jd-add-enable-host-to-handle-web-components main-jd-browserstack-fine-tune main-jd-browserstack-updates main-jd-docs-consistent-usage-of-css-sections-step-2 main-jd-fix-docs-headers-in-white main-jd-fix-highlight-docs-border-radius main-jd-fix-placeholder-color-background-params-for-img-markup main-jd-glossary-experiment main-jd-postcss-drop-empty-css-vars main-jd-proto-doc-astro main-jd-skip-navigation-component main-jd-stackblitz-for-examples main-jd-upgrade-browserlistrc main-jd-use-host main-lmp-dark-theme-customization main-lmp-handle-scroll-target main-lmp-tab-fix main-mc-opensearch main-xmr-bundlewatch-action main-xmr-eslint-plugin-compat main-xmr-hugo-docs-vendor main-xmr-hugo-rm-ver main-xmr-linkinator-prod main-xmr-min-mangle main-xmr-pa11y-ci more-darkmode-examples nested-dropdowns patrickhlauke-issue37428 patrickhlauke-use-of-color-tweaks pr/34102 pr/37590 previous-next-docs-links sticky-thead utilities-functions-mixin v530-dev v6-postcss-custom-media v6-spinner-dots v6/gs/use-floating-ui-in-place-of-popper xmr/dev xmr/docs-png xmr/docs-svgs xmr/hugo-reorg-files xmr/js-2 xmr/markdownlint xmr/prepare-530-alpha2 xmr/xo v5.3.0-alpha1 v5.2.3 v5.2.2 v5.2.1 v5.2.0 v5.2.0-beta1 v5.1.3 v5.1.2 v5.1.1 v5.1.0 v5.0.2 v5.0.1 v5.0.0 v5.0.0-beta3 v5.0.0-beta2 v5.0.0-beta1 v5.0.0-alpha3 v5.0.0-alpha2 v5.0.0-alpha1
1 merge request!31948Examples/Floating-labels: fix bad behavior with autofill
Showing with 173 additions and 124 deletions
+173 -124
...@@ -53,9 +53,9 @@ title: Album example ...@@ -53,9 +53,9 @@ title: Album example
<div class="album py-5 bg-light"> <div class="album py-5 bg-light">
<div class="container"> <div class="container">
<div class="row"> <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<div class="col-md-4"> <div class="col">
<div class="card mb-4 shadow-sm"> <div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
<div class="card-body"> <div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
...@@ -69,8 +69,8 @@ title: Album example ...@@ -69,8 +69,8 @@ title: Album example
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col">
<div class="card mb-4 shadow-sm"> <div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
<div class="card-body"> <div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
...@@ -84,8 +84,8 @@ title: Album example ...@@ -84,8 +84,8 @@ title: Album example
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col">
<div class="card mb-4 shadow-sm"> <div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
<div class="card-body"> <div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
...@@ -100,8 +100,8 @@ title: Album example ...@@ -100,8 +100,8 @@ title: Album example
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col">
<div class="card mb-4 shadow-sm"> <div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
<div class="card-body"> <div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
...@@ -115,8 +115,8 @@ title: Album example ...@@ -115,8 +115,8 @@ title: Album example
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col">
<div class="card mb-4 shadow-sm"> <div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
<div class="card-body"> <div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
...@@ -130,8 +130,8 @@ title: Album example ...@@ -130,8 +130,8 @@ title: Album example
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col">
<div class="card mb-4 shadow-sm"> <div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
<div class="card-body"> <div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
...@@ -146,8 +146,8 @@ title: Album example ...@@ -146,8 +146,8 @@ title: Album example
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col">
<div class="card mb-4 shadow-sm"> <div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
<div class="card-body"> <div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
...@@ -161,8 +161,8 @@ title: Album example ...@@ -161,8 +161,8 @@ title: Album example
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col">
<div class="card mb-4 shadow-sm"> <div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
<div class="card-body"> <div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
...@@ -176,8 +176,8 @@ title: Album example ...@@ -176,8 +176,8 @@ title: Album example
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col">
<div class="card mb-4 shadow-sm"> <div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}} {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
<div class="card-body"> <div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
......
...@@ -52,7 +52,7 @@ include_js: false ...@@ -52,7 +52,7 @@ include_js: false
<div class="row mb-2"> <div class="row mb-2">
<div class="col-md-6"> <div class="col-md-6">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"> <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static"> <div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">World</strong> <strong class="d-inline-block mb-2 text-primary">World</strong>
<h3 class="mb-0">Featured post</h3> <h3 class="mb-0">Featured post</h3>
...@@ -66,7 +66,7 @@ include_js: false ...@@ -66,7 +66,7 @@ include_js: false
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"> <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static"> <div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-success">Design</strong> <strong class="d-inline-block mb-2 text-success">Design</strong>
<h3 class="mb-0">Post title</h3> <h3 class="mb-0">Post title</h3>
......
...@@ -13,7 +13,7 @@ extra_css: ...@@ -13,7 +13,7 @@ extra_css:
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarCollapse"> <div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto mb-2 mb-md-0">
<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>
...@@ -24,9 +24,9 @@ extra_css: ...@@ -24,9 +24,9 @@ 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>
</ul> </ul>
<form class="form-inline mt-2 mt-md-0"> <form class="d-flex">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> <button class="btn btn-outline-success" type="submit">Search</button>
</form> </form>
</div> </div>
</div> </div>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
layout: examples layout: examples
title: Checkout example title: Checkout example
extra_css: extra_css:
- "form-validation.css" - "form-validation.css"
extra_js: extra_js:
- src: "form-validation.js" - src: "form-validation.js"
body_class: "bg-light" body_class: "bg-light"
...@@ -15,8 +15,8 @@ body_class: "bg-light" ...@@ -15,8 +15,8 @@ body_class: "bg-light"
<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> <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> </div>
<div class="row"> <div class="row g-3">
<div class="col-md-4 order-md-2 mb-4"> <div class="col-md-5 col-lg-4 order-md-last">
<h4 class="d-flex justify-content-between align-items-center mb-3"> <h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-muted">Your cart</span> <span class="text-muted">Your cart</span>
<span class="badge bg-secondary rounded-pill">3</span> <span class="badge bg-secondary rounded-pill">3</span>
...@@ -65,62 +65,61 @@ body_class: "bg-light" ...@@ -65,62 +65,61 @@ body_class: "bg-light"
</div> </div>
</form> </form>
</div> </div>
<div class="col-md-8 order-md-1"> <div class="col-md-7 col-lg-8">
<h4 class="mb-3">Billing address</h4> <h4 class="mb-3">Billing address</h4>
<form class="needs-validation" novalidate> <form class="needs-validation" novalidate>
<div class="row"> <div class="row g-3">
<div class="col-md-6 mb-3"> <div class="col-sm-6">
<label for="firstName">First name</label> <label for="firstName">First name</label>
<input type="text" class="form-control" id="firstName" placeholder="" value="" required> <input type="text" class="form-control" id="firstName" placeholder="" value="" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Valid first name is required. Valid first name is required.
</div> </div>
</div> </div>
<div class="col-md-6 mb-3">
<div class="col-sm-6">
<label for="lastName">Last name</label> <label for="lastName">Last name</label>
<input type="text" class="form-control" id="lastName" placeholder="" value="" required> <input type="text" class="form-control" id="lastName" placeholder="" value="" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Valid last name is required. Valid last name is required.
</div> </div>
</div> </div>
</div>
<div class="mb-3"> <div class="col-12">
<label for="username">Username</label> <label for="username">Username</label>
<div class="input-group"> <div class="input-group">
<div class="input-group-prepend"> <div class="input-group-prepend">
<span class="input-group-text">@</span> <span class="input-group-text">@</span>
</div> </div>
<input type="text" class="form-control" id="username" placeholder="Username" required> <input type="text" class="form-control" id="username" placeholder="Username" required>
<div class="invalid-feedback w-100"> <div class="invalid-feedback w-100">
Your username is required. Your username is required.
</div>
</div> </div>
</div> </div>
</div>
<div class="mb-3"> <div class="col-12">
<label for="email">Email <span class="text-muted">(Optional)</span></label> <label for="email">Email <span class="text-muted">(Optional)</span></label>
<input type="email" class="form-control" id="email" placeholder="you@example.com"> <input type="email" class="form-control" id="email" placeholder="you@example.com">
<div class="invalid-feedback"> <div class="invalid-feedback">
Please enter a valid email address for shipping updates. Please enter a valid email address for shipping updates.
</div>
</div> </div>
</div>
<div class="mb-3"> <div class="col-12">
<label for="address">Address</label> <label for="address">Address</label>
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required> <input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please enter your shipping address. Please enter your shipping address.
</div>
</div> </div>
</div>
<div class="mb-3"> <div class="col-12">
<label for="address2">Address 2 <span class="text-muted">(Optional)</span></label> <label for="address2">Address 2 <span class="text-muted">(Optional)</span></label>
<input type="text" class="form-control" id="address2" placeholder="Apartment or suite"> <input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
</div> </div>
<div class="row"> <div class="col-md-5">
<div class="col-md-5 mb-3">
<label for="country">Country</label> <label for="country">Country</label>
<select class="form-select" id="country" required> <select class="form-select" id="country" required>
<option value="">Choose...</option> <option value="">Choose...</option>
...@@ -130,7 +129,8 @@ body_class: "bg-light" ...@@ -130,7 +129,8 @@ body_class: "bg-light"
Please select a valid country. Please select a valid country.
</div> </div>
</div> </div>
<div class="col-md-4 mb-3">
<div class="col-md-4">
<label for="state">State</label> <label for="state">State</label>
<select class="form-select" id="state" required> <select class="form-select" id="state" required>
<option value="">Choose...</option> <option value="">Choose...</option>
...@@ -140,7 +140,8 @@ body_class: "bg-light" ...@@ -140,7 +140,8 @@ body_class: "bg-light"
Please provide a valid state. Please provide a valid state.
</div> </div>
</div> </div>
<div class="col-md-3 mb-3">
<div class="col-md-3">
<label for="zip">Zip</label> <label for="zip">Zip</label>
<input type="text" class="form-control" id="zip" placeholder="" required> <input type="text" class="form-control" id="zip" placeholder="" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
...@@ -148,20 +149,24 @@ body_class: "bg-light" ...@@ -148,20 +149,24 @@ body_class: "bg-light"
</div> </div>
</div> </div>
</div> </div>
<hr class="mb-4">
<hr class="my-4">
<div class="form-check"> <div class="form-check">
<input type="checkbox" class="form-check-input" id="same-address"> <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> <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 type="checkbox" class="form-check-input" id="save-info"> <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> <label class="form-check-label" for="save-info">Save this information for next time</label>
</div> </div>
<hr class="mb-4">
<hr class="my-4">
<h4 class="mb-3">Payment</h4> <h4 class="mb-3">Payment</h4>
<div class="d-block my-3"> <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 id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
<label class="form-check-label" for="credit">Credit card</label> <label class="form-check-label" for="credit">Credit card</label>
...@@ -175,8 +180,9 @@ body_class: "bg-light" ...@@ -175,8 +180,9 @@ body_class: "bg-light"
<label class="form-check-label" for="paypal">PayPal</label> <label class="form-check-label" for="paypal">PayPal</label>
</div> </div>
</div> </div>
<div class="row">
<div class="col-md-6 mb-3"> <div class="row gy-3">
<div class="col-md-6">
<label for="cc-name">Name on card</label> <label for="cc-name">Name on card</label>
<input type="text" class="form-control" id="cc-name" placeholder="" required> <input type="text" class="form-control" id="cc-name" placeholder="" required>
<small class="text-muted">Full name as displayed on card</small> <small class="text-muted">Full name as displayed on card</small>
...@@ -184,23 +190,24 @@ body_class: "bg-light" ...@@ -184,23 +190,24 @@ body_class: "bg-light"
Name on card is required Name on card is required
</div> </div>
</div> </div>
<div class="col-md-6 mb-3">
<div class="col-md-6">
<label for="cc-number">Credit card number</label> <label for="cc-number">Credit card number</label>
<input type="text" class="form-control" id="cc-number" placeholder="" required> <input type="text" class="form-control" id="cc-number" placeholder="" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Credit card number is required Credit card number is required
</div> </div>
</div> </div>
</div>
<div class="row"> <div class="col-md-3">
<div class="col-md-3 mb-3">
<label for="cc-expiration">Expiration</label> <label for="cc-expiration">Expiration</label>
<input type="text" class="form-control" id="cc-expiration" placeholder="" required> <input type="text" class="form-control" id="cc-expiration" placeholder="" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Expiration date required Expiration date required
</div> </div>
</div> </div>
<div class="col-md-3 mb-3">
<div class="col-md-3">
<label for="cc-cvv">CVV</label> <label for="cc-cvv">CVV</label>
<input type="text" class="form-control" id="cc-cvv" placeholder="" required> <input type="text" class="form-control" id="cc-cvv" placeholder="" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
...@@ -208,7 +215,9 @@ body_class: "bg-light" ...@@ -208,7 +215,9 @@ body_class: "bg-light"
</div> </div>
</div> </div>
</div> </div>
<hr class="mb-4">
<hr class="my-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button> <button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
</form> </form>
</div> </div>
......
.themed-grid-col { .themed-grid-col {
padding-top: 15px; padding-top: .75rem;
padding-bottom: 15px; padding-bottom: .75rem;
background-color: rgba(86, 61, 124, .15); background-color: rgba(86, 61, 124, .15);
border: 1px solid rgba(86, 61, 124, .2); border: 1px solid rgba(86, 61, 124, .2);
} }
.themed-container { .themed-container {
padding: 15px; padding: .75rem;
margin-bottom: 30px; margin-bottom: 1.5rem;
background-color: rgba(0, 123, 255, .15); background-color: rgba(0, 123, 255, .15);
border: 1px solid rgba(0, 123, 255, .2); border: 1px solid rgba(0, 123, 255, .2);
} }
...@@ -54,6 +54,14 @@ include_js: false ...@@ -54,6 +54,14 @@ include_js: false
<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>
<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="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>
<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">
...@@ -124,9 +132,41 @@ include_js: false ...@@ -124,9 +132,41 @@ include_js: false
<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> </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>
<div class="container" id="containers"> <div class="container" id="containers">
<hr class="my-4">
<h2 class="mt-4">Containers</h2> <h2 class="mt-4">Containers</h2>
<p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint.</p> <p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint.</p>
</div> </div>
......
...@@ -17,7 +17,7 @@ title: Bottom navbar example ...@@ -17,7 +17,7 @@ title: Bottom navbar example
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarCollapse"> <div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav">
<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>
......
...@@ -12,7 +12,7 @@ extra_css: ...@@ -12,7 +12,7 @@ extra_css:
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarCollapse"> <div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto mb-2 mb-md-0">
<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>
...@@ -23,9 +23,9 @@ extra_css: ...@@ -23,9 +23,9 @@ 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>
</ul> </ul>
<form class="form-inline mt-2 mt-md-0"> <form class="d-flex">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> <button class="btn btn-outline-success" type="submit">Search</button>
</form> </form>
</div> </div>
</div> </div>
......
...@@ -12,7 +12,7 @@ extra_css: ...@@ -12,7 +12,7 @@ extra_css:
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarCollapse"> <div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto mb-2 mb-md-0">
<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>
...@@ -23,9 +23,9 @@ extra_css: ...@@ -23,9 +23,9 @@ 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>
</ul> </ul>
<form class="form-inline mt-2 mt-md-0"> <form class="d-flex">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> <button class="btn btn-outline-success" type="submit">Search</button>
</form> </form>
</div> </div>
</div> </div>
......
...@@ -13,7 +13,7 @@ extra_css: ...@@ -13,7 +13,7 @@ extra_css:
</button> </button>
<div class="collapse navbar-collapse" id="navbarsExample01"> <div class="collapse navbar-collapse" id="navbarsExample01">
<ul class="navbar-nav mr-auto"> <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>
...@@ -32,7 +32,7 @@ extra_css: ...@@ -32,7 +32,7 @@ extra_css:
</div> </div>
</li> </li>
</ul> </ul>
<form class="form-inline my-2 my-md-0"> <form>
<input class="form-control" type="text" placeholder="Search" aria-label="Search"> <input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form> </form>
</div> </div>
...@@ -55,7 +55,7 @@ extra_css: ...@@ -55,7 +55,7 @@ extra_css:
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
</ul> </ul>
<form class="form-inline my-2 my-md-0"> <form>
<input class="form-control" type="text" placeholder="Search"> <input class="form-control" type="text" placeholder="Search">
</form> </form>
</div> </div>
...@@ -70,7 +70,7 @@ extra_css: ...@@ -70,7 +70,7 @@ extra_css:
</button> </button>
<div class="collapse navbar-collapse" id="navbarsExample03"> <div class="collapse navbar-collapse" id="navbarsExample03">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto mb-2 mb-sm-0">
<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>
...@@ -89,7 +89,7 @@ extra_css: ...@@ -89,7 +89,7 @@ extra_css:
</div> </div>
</li> </li>
</ul> </ul>
<form class="form-inline my-2 my-md-0"> <form>
<input class="form-control" type="text" placeholder="Search"> <input class="form-control" type="text" placeholder="Search">
</form> </form>
</div> </div>
...@@ -104,7 +104,7 @@ extra_css: ...@@ -104,7 +104,7 @@ extra_css:
</button> </button>
<div class="collapse navbar-collapse" id="navbarsExample04"> <div class="collapse navbar-collapse" id="navbarsExample04">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto mb-2 mb-md-0">
<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>
...@@ -123,7 +123,7 @@ extra_css: ...@@ -123,7 +123,7 @@ extra_css:
</div> </div>
</li> </li>
</ul> </ul>
<form class="form-inline my-2 my-md-0"> <form>
<input class="form-control" type="text" placeholder="Search"> <input class="form-control" type="text" placeholder="Search">
</form> </form>
</div> </div>
...@@ -138,7 +138,7 @@ extra_css: ...@@ -138,7 +138,7 @@ extra_css:
</button> </button>
<div class="collapse navbar-collapse" id="navbarsExample05"> <div class="collapse navbar-collapse" id="navbarsExample05">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
<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>
...@@ -157,7 +157,7 @@ extra_css: ...@@ -157,7 +157,7 @@ extra_css:
</div> </div>
</li> </li>
</ul> </ul>
<form class="form-inline my-2 my-md-0"> <form>
<input class="form-control" type="text" placeholder="Search"> <input class="form-control" type="text" placeholder="Search">
</form> </form>
</div> </div>
...@@ -172,7 +172,7 @@ extra_css: ...@@ -172,7 +172,7 @@ extra_css:
</button> </button>
<div class="collapse navbar-collapse" id="navbarsExample06"> <div class="collapse navbar-collapse" id="navbarsExample06">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto mb-2 mb-xl-0">
<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>
...@@ -191,7 +191,7 @@ extra_css: ...@@ -191,7 +191,7 @@ extra_css:
</div> </div>
</li> </li>
</ul> </ul>
<form class="form-inline my-2 my-md-0"> <form>
<input class="form-control" type="text" placeholder="Search"> <input class="form-control" type="text" placeholder="Search">
</form> </form>
</div> </div>
...@@ -206,7 +206,7 @@ extra_css: ...@@ -206,7 +206,7 @@ extra_css:
</button> </button>
<div class="collapse navbar-collapse" id="navbarsExample07"> <div class="collapse navbar-collapse" id="navbarsExample07">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
<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>
...@@ -225,7 +225,7 @@ extra_css: ...@@ -225,7 +225,7 @@ extra_css:
</div> </div>
</li> </li>
</ul> </ul>
<form class="form-inline my-2 my-md-0"> <form>
<input class="form-control" type="text" placeholder="Search" aria-label="Search"> <input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form> </form>
</div> </div>
...@@ -240,7 +240,7 @@ extra_css: ...@@ -240,7 +240,7 @@ extra_css:
</button> </button>
<div class="collapse navbar-collapse" id="navbarsExample07XL"> <div class="collapse navbar-collapse" id="navbarsExample07XL">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
<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>
...@@ -259,7 +259,7 @@ extra_css: ...@@ -259,7 +259,7 @@ extra_css:
</div> </div>
</li> </li>
</ul> </ul>
<form class="form-inline my-2 my-md-0"> <form>
<input class="form-control" type="text" placeholder="Search" aria-label="Search"> <input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form> </form>
</div> </div>
...@@ -309,7 +309,7 @@ extra_css: ...@@ -309,7 +309,7 @@ extra_css:
</button> </button>
<div class="collapse navbar-collapse" id="navbarsExample09"> <div class="collapse navbar-collapse" id="navbarsExample09">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
<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>
...@@ -328,7 +328,7 @@ extra_css: ...@@ -328,7 +328,7 @@ extra_css:
</div> </div>
</li> </li>
</ul> </ul>
<form class="form-inline my-2 my-md-0"> <form>
<input class="form-control" type="text" placeholder="Search" aria-label="Search"> <input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form> </form>
</div> </div>
......
...@@ -16,7 +16,7 @@ body_class: "bg-light" ...@@ -16,7 +16,7 @@ body_class: "bg-light"
</button> </button>
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault"> <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Dashboard</a> <a class="nav-link" aria-current="page" href="#">Dashboard</a>
</li> </li>
...@@ -38,9 +38,9 @@ body_class: "bg-light" ...@@ -38,9 +38,9 @@ body_class: "bg-light"
</div> </div>
</li> </li>
</ul> </ul>
<form class="form-inline my-2 my-lg-0"> <form class="d-flex">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> <button class="btn btn-outline-success" type="submit">Search</button>
</form> </form>
</div> </div>
</div> </div>
...@@ -73,24 +73,24 @@ body_class: "bg-light" ...@@ -73,24 +73,24 @@ body_class: "bg-light"
</div> </div>
<div class="my-3 p-3 bg-white rounded shadow-sm"> <div class="my-3 p-3 bg-white rounded shadow-sm">
<h6 class="border-bottom border-gray pb-2 mb-0">Recent updates</h6> <h6 class="border-bottom pb-2 mb-0">Recent updates</h6>
<div class="d-flex text-muted pt-3"> <div class="d-flex text-muted pt-3">
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}} {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}}
<p class="pb-3 mb-0 small lh-sm border-bottom border-gray"> <p class="pb-3 mb-0 small lh-sm border-bottom">
<strong class="d-block text-gray-dark">@username</strong> <strong class="d-block text-gray-dark">@username</strong>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
</p> </p>
</div> </div>
<div class="d-flex text-muted pt-3"> <div class="d-flex text-muted pt-3">
{{< placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="flex-shrink-0 mr-2 rounded" >}} {{< placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="flex-shrink-0 mr-2 rounded" >}}
<p class="pb-3 mb-0 small lh-sm border-bottom border-gray"> <p class="pb-3 mb-0 small lh-sm border-bottom">
<strong class="d-block text-gray-dark">@username</strong> <strong class="d-block text-gray-dark">@username</strong>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
</p> </p>
</div> </div>
<div class="d-flex text-muted pt-3"> <div class="d-flex text-muted pt-3">
{{< placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="flex-shrink-0 mr-2 rounded" >}} {{< placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="flex-shrink-0 mr-2 rounded" >}}
<p class="pb-3 mb-0 small lh-sm border-bottom border-gray"> <p class="pb-3 mb-0 small lh-sm border-bottom">
<strong class="d-block text-gray-dark">@username</strong> <strong class="d-block text-gray-dark">@username</strong>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
</p> </p>
...@@ -101,10 +101,10 @@ body_class: "bg-light" ...@@ -101,10 +101,10 @@ body_class: "bg-light"
</div> </div>
<div class="my-3 p-3 bg-white rounded shadow-sm"> <div class="my-3 p-3 bg-white rounded shadow-sm">
<h6 class="border-bottom border-gray pb-2 mb-0">Suggestions</h6> <h6 class="border-bottom pb-2 mb-0">Suggestions</h6>
<div class="d-flex text-muted pt-3"> <div class="d-flex text-muted pt-3">
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}} {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}}
<div class="pb-3 mb-0 small lh-sm border-bottom border-gray w-100"> <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between">
<strong class="text-gray-dark">Full Name</strong> <strong class="text-gray-dark">Full Name</strong>
<a href="#">Follow</a> <a href="#">Follow</a>
...@@ -114,7 +114,7 @@ body_class: "bg-light" ...@@ -114,7 +114,7 @@ body_class: "bg-light"
</div> </div>
<div class="d-flex text-muted pt-3"> <div class="d-flex text-muted pt-3">
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}} {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}}
<div class="pb-3 mb-0 small lh-sm border-bottom border-gray w-100"> <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between">
<strong class="text-gray-dark">Full Name</strong> <strong class="text-gray-dark">Full Name</strong>
<a href="#">Follow</a> <a href="#">Follow</a>
...@@ -124,7 +124,7 @@ body_class: "bg-light" ...@@ -124,7 +124,7 @@ body_class: "bg-light"
</div> </div>
<div class="d-flex text-muted pt-3"> <div class="d-flex text-muted pt-3">
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}} {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}}
<div class="pb-3 mb-0 small lh-sm border-bottom border-gray w-100"> <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between">
<strong class="text-gray-dark">Full Name</strong> <strong class="text-gray-dark">Full Name</strong>
<a href="#">Follow</a> <a href="#">Follow</a>
......
...@@ -13,7 +13,7 @@ extra_css: ...@@ -13,7 +13,7 @@ extra_css:
</button> </button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault"> <div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto mb-2 mb-md-0">
<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>
...@@ -32,9 +32,9 @@ extra_css: ...@@ -32,9 +32,9 @@ extra_css:
</div> </div>
</li> </li>
</ul> </ul>
<form class="form-inline my-2 my-lg-0"> <form class="d-flex">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button> <button class="btn btn-outline-success" type="submit">Search</button>
</form> </form>
</div> </div>
</div> </div>
......
...@@ -16,7 +16,7 @@ body_class: "d-flex flex-column h-100" ...@@ -16,7 +16,7 @@ body_class: "d-flex flex-column h-100"
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarCollapse"> <div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto mb-2 mb-md-0">
<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>
...@@ -27,9 +27,9 @@ body_class: "d-flex flex-column h-100" ...@@ -27,9 +27,9 @@ body_class: "d-flex flex-column h-100"
<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>
</ul> </ul>
<form class="form-inline mt-2 mt-md-0"> <form class="d-flex">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> <button class="btn btn-outline-success" type="submit">Search</button>
</form> </form>
</div> </div>
</div> </div>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment