From 807c1b6d068c95bb076ffaac8542665065fb054b Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Mon, 5 Nov 2018 13:24:55 +0200 Subject: [PATCH] Add an examples layout. Reduces duplication and makes maintenance easier. --- site/_includes/stylesheet.html | 8 +- site/_layouts/examples.html | 40 ++ site/docs/4.1/examples/album/index.html | 355 +++++----- site/docs/4.1/examples/blog/index.html | 415 ++++++------ site/docs/4.1/examples/carousel/index.html | 321 +++++---- .../4.1/examples/checkout/form-validation.js | 20 + site/docs/4.1/examples/checkout/index.html | 458 ++++++------- site/docs/4.1/examples/cover/index.html | 88 +-- site/docs/4.1/examples/dashboard/dashboard.js | 53 ++ site/docs/4.1/examples/dashboard/index.html | 530 +++++++-------- .../4.1/examples/floating-labels/index.html | 70 +- site/docs/4.1/examples/grid/index.html | 259 ++++---- site/docs/4.1/examples/jumbotron/index.html | 159 ++--- .../4.1/examples/navbar-bottom/index.html | 96 ++- .../docs/4.1/examples/navbar-fixed/index.html | 93 +-- .../4.1/examples/navbar-static/index.html | 93 +-- site/docs/4.1/examples/navbars/index.html | 621 +++++++++--------- site/docs/4.1/examples/offcanvas/index.html | 268 ++++---- site/docs/4.1/examples/pricing/index.html | 235 +++---- site/docs/4.1/examples/product/index.html | 298 ++++----- site/docs/4.1/examples/sign-in/index.html | 57 +- .../4.1/examples/starter-template/index.html | 117 ++-- .../examples/sticky-footer-navbar/index.html | 119 ++-- .../4.1/examples/sticky-footer/index.html | 54 +- 24 files changed, 2226 insertions(+), 2601 deletions(-) create mode 100644 site/_layouts/examples.html create mode 100644 site/docs/4.1/examples/checkout/form-validation.js create mode 100644 site/docs/4.1/examples/dashboard/dashboard.js diff --git a/site/_includes/stylesheet.html b/site/_includes/stylesheet.html index ad04d86782..3846f9fe1c 100644 --- a/site/_includes/stylesheet.html +++ b/site/_includes/stylesheet.html @@ -1,12 +1,16 @@ -{% if jekyll.environment == "production" %} +{%- if jekyll.environment == "production" %} {% else %} -{% endif %} +{% endif -%} +{%- if page.layout == "docs" or page.layout != "examples" -%} {% if page.layout == "docs" %} {% endif %} +{% if page.layout != "examples" %} +{% endif %} +{%- endif -%} diff --git a/site/_layouts/examples.html b/site/_layouts/examples.html new file mode 100644 index 0000000000..257b36df1b --- /dev/null +++ b/site/_layouts/examples.html @@ -0,0 +1,40 @@ + + + + + + + + + {{ page.title | smartify }} · {{ site.title | smartify }} + + {% include stylesheet.html %} + + {%- for css in page.extra_css %} + + + {%- endfor %} + + + {{ content }} + + {%- if page.include_js != false -%} + + + + {%- if jekyll.environment == "production" -%} + + {%- else -%} + + {%- endif -%} + + {%- if page.include_holder == true -%} + + {%- endif -%} + + {%- for js in page.extra_js %} + + {%- endfor %} + {%- endif -%} + + diff --git a/site/docs/4.1/examples/album/index.html b/site/docs/4.1/examples/album/index.html index 77123eb1e8..b5aaf2ca9a 100644 --- a/site/docs/4.1/examples/album/index.html +++ b/site/docs/4.1/examples/album/index.html @@ -1,231 +1,208 @@ - - - - - - - - +--- +layout: examples +title: Album example +extra_css: "album.css" +include_holder: true +--- - Album example for Bootstrap - - - - - - - - - - -
- +
+
+ + + Album + + +
+
+
-
+
-
-
-

Album example

-

Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.

-

- Main call to action - Secondary action -

-
-
+
+
+

Album example

+

Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.

+

+ Main call to action + Secondary action +

+
+
-
-
+
+
-
-
-
- Card image cap -
-

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

-
-
- - -
- 9 mins -
+
+
+
+ Card image cap +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ +
+ 9 mins
-
-
- Card image cap -
-

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

-
-
- - -
- 9 mins -
+
+
+
+
+ Card image cap +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ +
+ 9 mins
-
-
- Card image cap -
-

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

-
-
- - -
- 9 mins -
+
+
+
+
+ Card image cap +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ +
+ 9 mins
+
+
-
-
- Card image cap -
-

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

-
-
- - -
- 9 mins -
+
+
+ Card image cap +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ +
+ 9 mins
-
-
- Card image cap -
-

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

-
-
- - -
- 9 mins -
+
+
+
+
+ Card image cap +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ +
+ 9 mins
-
-
- Card image cap -
-

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

-
-
- - -
- 9 mins -
+
+
+
+
+ Card image cap +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ +
+ 9 mins
+
+
-
-
- Card image cap -
-

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

-
-
- - -
- 9 mins -
+
+
+ Card image cap +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ +
+ 9 mins
-
-
- Card image cap -
-

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

-
-
- - -
- 9 mins -
+
+
+
+
+ Card image cap +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ +
+ 9 mins
-
-
- Card image cap -
-

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

-
-
- - -
- 9 mins -
+
+
+
+
+ Card image cap +
+

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+
+
+ +
+ 9 mins
+
+
-
- - +
- - - - - - - - + diff --git a/site/docs/4.1/examples/blog/index.html b/site/docs/4.1/examples/blog/index.html index cffde77372..8448033a18 100644 --- a/site/docs/4.1/examples/blog/index.html +++ b/site/docs/4.1/examples/blog/index.html @@ -1,230 +1,201 @@ - - - - - - - - - - Blog Template for Bootstrap - - - - - - - - - - - -
-
-
-
- Subscribe -
-
- -
-
- - - - Sign up -
-
-
- -
- +--- +layout: examples +title: Blog Template +extra_css: + - "https://fonts.googleapis.com/css?family=Playfair+Display:700,900" + - "blog.css" +include_holder: true +--- + +
+
+
+
+ Subscribe
- -
-
-

Title of a longer featured blog post

-

Multiple lines of text that form the lede, informing new readers quickly and efficiently about what's most interesting in this post's contents.

-

Continue reading...

-
+
+
- -
-
-
-
- World -

- Featured post -

-
Nov 12
-

This is a wider card with supporting text below as a natural lead-in to additional content.

- Continue reading -
- Card image cap -
+
+ + + + Sign up +
+
+
+ +
+ +
+ +
+
+

Title of a longer featured blog post

+

Multiple lines of text that form the lede, informing new readers quickly and efficiently about what's most interesting in this post's contents.

+

Continue reading...

+
+
+ +
+
+
+
+ World +

+ Featured post +

+
Nov 12
+

This is a wider card with supporting text below as a natural lead-in to additional content.

+ Continue reading
-
-
-
- Design -

- Post title -

-
Nov 11
-

This is a wider card with supporting text below as a natural lead-in to additional content.

- Continue reading -
- Card image cap -
+ Card image cap +
+
+
+
+
+ Design +

+ Post title +

+
Nov 11
+

This is a wider card with supporting text below as a natural lead-in to additional content.

+ Continue reading
+ Card image cap
+
+
+ +
+
+
+

+ From the Firehose +

+ +
+

Sample blog post

+

January 1, 2014 by Mark

+ +

This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.

+
+

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.

+
+

Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.

+
+

Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

+

Heading

+

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.

+

Sub-heading

+

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

+ 
Example code block
+

Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.

+

Sub-heading

+

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+
    +
  • Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
    • +
  • Donec id elit non mi porta gravida at eget metus.
    • +
  • Nulla vitae elit libero, a pharetra augue.
    • +
+

Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.

+
    +
  1. Vestibulum id ligula porta felis euismod semper.
    2. +
  2. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    3. +
  3. Maecenas sed diam eget risus varius blandit sit amet non magna.
    4. +
+

Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.

+
+ +
+

Another blog post

+

December 23, 2013 by Jacob

+ +

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.

+
+

Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.

+
+

Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

+

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.

+
+ +
+

New feature

+

December 14, 2013 by Chris

+ +

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+
    +
  • Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
    • +
  • Donec id elit non mi porta gravida at eget metus.
    • +
  • Nulla vitae elit libero, a pharetra augue.
    • +
+

Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

+

Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.

+
+ + + +
+ + + +
+ +
-
-

Sample blog post

-

January 1, 2014 by Mark

- -

This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.

-
-

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.

-
-

Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.

-
-

Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

-

Heading

-

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.

-

Sub-heading

-

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

- 
Example code block
-

Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.

-

Sub-heading

-

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

-
    -
  • Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
    • -
  • Donec id elit non mi porta gravida at eget metus.
    • -
  • Nulla vitae elit libero, a pharetra augue.
    • -
-

Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.

-
    -
  1. Vestibulum id ligula porta felis euismod semper.
    2. -
  2. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    3. -
  3. Maecenas sed diam eget risus varius blandit sit amet non magna.
    4. -
-

Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.

-
- -
-

Another blog post

-

December 23, 2013 by Jacob

- -

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.

-
-

Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.

-
-

Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

-

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.

-
- -
-

New feature

-

December 14, 2013 by Chris

- -

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

-
    -
  • Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
    • -
  • Donec id elit non mi porta gravida at eget metus.
    • -
  • Nulla vitae elit libero, a pharetra augue.
    • -
-

Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

-

Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.

-
- - - -
- - - -
- - - - - - - - - - - - - - + diff --git a/site/docs/4.1/examples/carousel/index.html b/site/docs/4.1/examples/carousel/index.html index 4d8152ffdb..13ee6765fc 100644 --- a/site/docs/4.1/examples/carousel/index.html +++ b/site/docs/4.1/examples/carousel/index.html @@ -1,187 +1,164 @@ - - - - - - - - - - Carousel Template for Bootstrap - - - - - - - - - -
- -
- -
- -
diff --git a/site/docs/4.1/examples/checkout/form-validation.js b/site/docs/4.1/examples/checkout/form-validation.js new file mode 100644 index 0000000000..280849408b --- /dev/null +++ b/site/docs/4.1/examples/checkout/form-validation.js @@ -0,0 +1,20 @@ +// Example starter JavaScript for disabling form submissions if there are invalid fields +(function () { + 'use strict' + + window.addEventListener('load', function () { + // Fetch all the forms we want to apply custom Bootstrap validation styles to + var forms = document.getElementsByClassName('needs-validation') + + // Loop over them and prevent submission + Array.prototype.filter.call(forms, function (form) { + form.addEventListener('submit', function (event) { + if (form.checkValidity() === false) { + event.preventDefault() + event.stopPropagation() + } + form.classList.add('was-validated') + }, false) + }) + }, false) +}()) diff --git a/site/docs/4.1/examples/checkout/index.html b/site/docs/4.1/examples/checkout/index.html index 127c1cacb5..8deef9ef01 100644 --- a/site/docs/4.1/examples/checkout/index.html +++ b/site/docs/4.1/examples/checkout/index.html @@ -1,267 +1,223 @@ - - - - - - - - - - Checkout example for Bootstrap - - - - - - - - - - -
-
- -

Checkout form

-

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.

-
- -
-
-

- Your cart - 3 -

-
    -
  • -
    -
    Product name
    - Brief description -
    - $12 -
    • -
  • -
    -
    Second product
    - Brief description -
    - $8 -
    • -
  • -
    -
    Third item
    - Brief description -
    - $5 -
    • -
  • -
    -
    Promo code
    - EXAMPLECODE -
    - -$5 -
    • -
  • - Total (USD) - $20 -
    • -
- -
-
- -
- -
-
-
+--- +layout: examples +title: Checkout example +extra_css: "form-validation.css" +extra_js: "form-validation.js" +body_class: "bg-light" +--- + +
+
+ +

Checkout form

+

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.

+
+ +
+
+

+ Your cart + 3 +

+
    +
  • +
    +
    Product name
    + Brief description +
    + $12 +
    • +
  • +
    +
    Second product
    + Brief description +
    + $8 +
    • +
  • +
    +
    Third item
    + Brief description +
    + $5 +
    • +
  • +
    +
    Promo code
    + EXAMPLECODE +
    + -$5 +
    • +
  • + Total (USD) + $20 +
    • +
+ +
+
+ +
+ +
-
-

Billing address

- -
-
- - -
- Valid first name is required. -
-
-
- - -
- Valid last name is required. -
-
+ +
+
+

Billing address

+
+
+
+ + +
+ Valid first name is required.
- -
- -
-
- @ -
- -
- Your username is required. -
-
+
+
+ + +
+ Valid last name is required.
+
+
-
- - -
- Please enter a valid email address for shipping updates. -
+
+ +
+
+ @
- -
- - -
- Please enter your shipping address. -
+ +
+ Your username is required.
+
+
-
- - -
+
+ + +
+ Please enter a valid email address for shipping updates. +
+
-
-
- - -
- Please select a valid country. -
-
-
- - -
- Please provide a valid state. -
-
-
- - -
- Zip code required. -
-
+
+ + +
+ Please enter your shipping address. +
+
+ +
+ + +
+ +
+
+ + +
+ Please select a valid country.
-
-
- - +
+
+ + +
+ Please provide a valid state.
-
- - +
+
+ + +
+ Zip code required.
-
- -

Payment

- -
-
- - -
-
- - -
-
- - -
+
+
+
+
+ + +
+
+ + +
+
+ +

Payment

+ +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + + Full name as displayed on card +
+ Name on card is required +
+
+
+ + +
+ Credit card number is required
-
-
- - - Full name as displayed on card -
- Name on card is required -
-
-
- - -
- Credit card number is required -
-
+
+
+
+
+ + +
+ Expiration date required
-
-
- - -
- Expiration date required -
-
-
- - -
- Security code required -
-
+
+
+ + +
+ Security code required
-
- - +
-
- - +
+ +
- - - - - - - - - - +
+ + +
diff --git a/site/docs/4.1/examples/cover/index.html b/site/docs/4.1/examples/cover/index.html index e2885fab07..0b74e4fae9 100644 --- a/site/docs/4.1/examples/cover/index.html +++ b/site/docs/4.1/examples/cover/index.html @@ -1,56 +1,34 @@ - - - - - - - - - - Cover Template for Bootstrap - - - - - - - - - - -
-
-
-

Cover

- -
-
- -
-

Cover your page.

-

Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.

-

- Learn more -

-
- - +--- +layout: examples +title: Cover Template +extra_css: "cover.css" +body_class: "text-center" +include_js: false +--- + +
+
+
+

Cover

+
- - - - - - - - - +
+ +
+

Cover your page.

+

Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.

+

+ Learn more +

+
+ + +
diff --git a/site/docs/4.1/examples/dashboard/dashboard.js b/site/docs/4.1/examples/dashboard/dashboard.js new file mode 100644 index 0000000000..de4a6347a3 --- /dev/null +++ b/site/docs/4.1/examples/dashboard/dashboard.js @@ -0,0 +1,53 @@ +/* globals Chart:false, feather:false */ + +(function () { + 'use strict' + + feather.replace() + + // Graphs + var ctx = document.getElementById('myChart') + // eslint-disable-next-line no-unused-vars + var myChart = new Chart(ctx, { + type: 'line', + data: { + labels: [ + 'Sunday', + 'Monday', + 'Tuesday', + 'Wednesday', + 'Thursday', + 'Friday', + 'Saturday' + ], + datasets: [{ + data: [ + 15339, + 21345, + 18483, + 24003, + 23489, + 24092, + 12034 + ], + lineTension: 0, + backgroundColor: 'transparent', + borderColor: '#007bff', + borderWidth: 4, + pointBackgroundColor: '#007bff' + }] + }, + options: { + scales: { + yAxes: [{ + ticks: { + beginAtZero: false + } + }] + }, + legend: { + display: false + } + } + }) +}()) diff --git a/site/docs/4.1/examples/dashboard/index.html b/site/docs/4.1/examples/dashboard/index.html index f633a6fde4..c8038f6c67 100644 --- a/site/docs/4.1/examples/dashboard/index.html +++ b/site/docs/4.1/examples/dashboard/index.html @@ -1,302 +1,246 @@ - - - - - - - - +--- +layout: examples +title: Dashboard Template +extra_css: "dashboard.css" +extra_js: + - "https://unpkg.com/feather-icons/dist/feather.min.js" + - "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js" + - "dashboard.js" +--- - Dashboard Template for Bootstrap + - - +
+
+ -
-
- - -
-
-

Dashboard

-
-
- - -
- -
+
+
+

Dashboard

+
+
+ +
- - - -

Section title

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#HeaderHeaderHeaderHeader
1,001Loremipsumdolorsit
1,002ametconsecteturadipiscingelit
1,003IntegernecodioPraesent
1,003liberoSedcursusante
1,004dapibusdiamSednisi
1,005Nullaquissemat
1,006nibhelementumimperdietDuis
1,007sagittisipsumPraesentmauris
1,008Fuscenectellussed
1,009auguesemperportaMauris
1,010massaVestibulumlaciniaarcu
1,011egetnullaClassaptent
1,012tacitisociosquadlitora
1,013torquentperconubianostra
1,014perinceptoshimenaeosCurabitur
1,015sodalesligulainlibero
-
-
+ +
-
- - - - - + - - - - - - - - - +

Section title

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#HeaderHeaderHeaderHeader
1,001Loremipsumdolorsit
1,002ametconsecteturadipiscingelit
1,003IntegernecodioPraesent
1,003liberoSedcursusante
1,004dapibusdiamSednisi
1,005Nullaquissemat
1,006nibhelementumimperdietDuis
1,007sagittisipsumPraesentmauris
1,008Fuscenectellussed
1,009auguesemperportaMauris
1,010massaVestibulumlaciniaarcu
1,011egetnullaClassaptent
1,012tacitisociosquadlitora
1,013torquentperconubianostra
1,014perinceptoshimenaeosCurabitur
1,015sodalesligulainlibero
+
+ +
+
diff --git a/site/docs/4.1/examples/floating-labels/index.html b/site/docs/4.1/examples/floating-labels/index.html index 48dc09db12..9f1d8131d4 100644 --- a/site/docs/4.1/examples/floating-labels/index.html +++ b/site/docs/4.1/examples/floating-labels/index.html @@ -1,46 +1,32 @@ - - - - - - - - +--- +layout: examples +title: Floating labels example +extra_css: "floating-labels.css" +include_js: false +--- - Floating labels example for Bootstrap + - - +
+ +
+ +

© 2017-2018

+ diff --git a/site/docs/4.1/examples/grid/index.html b/site/docs/4.1/examples/grid/index.html index 966abd6a97..b41090438d 100644 --- a/site/docs/4.1/examples/grid/index.html +++ b/site/docs/4.1/examples/grid/index.html @@ -1,139 +1,126 @@ - - - - - - - - - - Grid Template for Bootstrap - - - - - - - - - -
- -

Bootstrap grid examples

-

Basic grid layouts to get you familiar with building within the Bootstrap grid system.

-

In these examples the .themed-grid-col class is added to the columns to add some theming. This is not a class that is available in Bootstrap by default.

- -

Five grid tiers

-

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.

- -
-
.col-4
-
.col-4
-
.col-4
+--- +layout: examples +title: Grid Template +extra_css: "grid.css" +body_class: "py-4" +include_js: false +--- + +
+ +

Bootstrap grid examples

+

Basic grid layouts to get you familiar with building within the Bootstrap grid system.

+

In these examples the .themed-grid-col class is added to the columns to add some theming. This is not a class that is available in Bootstrap by default.

+ +

Five grid tiers

+

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.

+ +
+
.col-4
+
.col-4
+
.col-4
+
+ +
+
.col-sm-4
+
.col-sm-4
+
.col-sm-4
+
+ +
+
.col-md-4
+
.col-md-4
+
.col-md-4
+
+ +
+
.col-lg-4
+
.col-lg-4
+
.col-lg-4
+
+ +
+
.col-xl-4
+
.col-xl-4
+
.col-xl-4
+
+ +

Three equal columns

+

Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

+
+
.col-md-4
+
.col-md-4
+
.col-md-4
+
+ +

Three unequal columns

+

Get three columns starting at desktops and scaling to large desktops 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.

+
+
.col-md-3
+
.col-md-6
+
.col-md-3
+
+ +

Two columns

+

Get two columns starting at desktops and scaling to large desktops.

+
+
.col-md-8
+
.col-md-4
+
+ +

Full width, single column

+

+ No grid classes are necessary for full-width elements. +

+ +
+ +

Two columns with two nested columns

+

Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

+

At mobile device sizes, tablets and down, these columns and their nested columns will stack.

+
+
+
+ .col-md-8
- -
-
.col-sm-4
-
.col-sm-4
-
.col-sm-4
-
- -
-
.col-md-4
-
.col-md-4
-
.col-md-4
-
- -
-
.col-lg-4
-
.col-lg-4
-
.col-lg-4
-
- -
-
.col-xl-4
-
.col-xl-4
-
.col-xl-4
-
- -

Three equal columns

-

Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

-
-
.col-md-4
-
.col-md-4
-
.col-md-4
-
- -

Three unequal columns

-

Get three columns starting at desktops and scaling to large desktops 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.

-
-
.col-md-3
+
+
.col-md-6
.col-md-6
-
.col-md-3
-
- -

Two columns

-

Get two columns starting at desktops and scaling to large desktops.

-
-
.col-md-8
-
.col-md-4
-
- -

Full width, single column

-

- No grid classes are necessary for full-width elements. -

- -
- -

Two columns with two nested columns

-

Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

-

At mobile device sizes, tablets and down, these columns and their nested columns will stack.

-
-
-
- .col-md-8 -
-
-
.col-md-6
-
.col-md-6
-
-
-
.col-md-4
-
- -
- -

Mixed: mobile and desktop

-

The Bootstrap v4 grid system has five tiers of classes: xs (extra small), 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.

-

Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.

-
-
.col-12 .col-md-8
-
.col-6 .col-md-4
-
-
-
.col-6 .col-md-4
-
.col-6 .col-md-4
-
.col-6 .col-md-4
-
-
-
.col-6
-
.col-6
-
- -
- -

Mixed: mobile, tablet, and desktop

-
-
.col-12 .col-sm-6 .col-lg-8
-
.col-6 .col-lg-4
-
-
-
.col-6 .col-sm-4
-
.col-6 .col-sm-4
-
.col-6 .col-sm-4
- -
- - +
+
.col-md-4
+
+ +
+ +

Mixed: mobile and desktop

+

The Bootstrap v4 grid system has five tiers of classes: xs (extra small), 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.

+

Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.

+
+
.col-12 .col-md-8
+
.col-6 .col-md-4
+
+
+
.col-6 .col-md-4
+
.col-6 .col-md-4
+
.col-6 .col-md-4
+
+
+
.col-6
+
.col-6
+
+ +
+ +

Mixed: mobile, tablet, and desktop

+
+
.col-12 .col-sm-6 .col-lg-8
+
.col-6 .col-lg-4
+
+
+
.col-6 .col-sm-4
+
.col-6 .col-sm-4
+
.col-6 .col-sm-4
+
+ +
diff --git a/site/docs/4.1/examples/jumbotron/index.html b/site/docs/4.1/examples/jumbotron/index.html index cabbe71abb..7d5c496db3 100644 --- a/site/docs/4.1/examples/jumbotron/index.html +++ b/site/docs/4.1/examples/jumbotron/index.html @@ -1,102 +1,79 @@ - - - - - - - - +--- +layout: examples +title: Jumbotron Template +extra_css: "jumbotron.css" +--- - Jumbotron Template for Bootstrap + - +
- - -
- - -
-
-

Hello, world!

-

This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.

-

Learn more »

-
+
+

Heading

+

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. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+

Heading

+

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+

View details »

+
+
-
- -
-
-

Heading

-

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. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

-

View details »

-
-
-

Heading

-

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. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

-

View details »

-
-
-

Heading

-

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

-

View details »

-
-
- -
- -
+
-
+
-
-

© Company 2017-2018

-
+ - - - - - - - +
+

© Company 2017-2018

+
diff --git a/site/docs/4.1/examples/navbar-bottom/index.html b/site/docs/4.1/examples/navbar-bottom/index.html index e8843cac8d..97f7e0b5d5 100644 --- a/site/docs/4.1/examples/navbar-bottom/index.html +++ b/site/docs/4.1/examples/navbar-bottom/index.html @@ -1,59 +1,39 @@ - - - - - - - - +--- +layout: examples +title: Bottom navbar example +--- - Bottom navbar example for Bootstrap - - - - - - -
-
-

Bottom Navbar example

-

This example is a quick exercise to illustrate how the bottom navbar works.

- View navbar docs » -
-
- - - - - - - - - +
+
+

Bottom Navbar example

+

This example is a quick exercise to illustrate how the bottom navbar works.

+ View navbar docs » +
+
+ diff --git a/site/docs/4.1/examples/navbar-fixed/index.html b/site/docs/4.1/examples/navbar-fixed/index.html index 385349208c..022814f60e 100644 --- a/site/docs/4.1/examples/navbar-fixed/index.html +++ b/site/docs/4.1/examples/navbar-fixed/index.html @@ -1,60 +1,37 @@ - - - - - - - - +--- +layout: examples +title: Fixed top navbar example +extra_css: "navbar-top-fixed.css" +--- - Fixed top navbar example for Bootstrap + - - - - - - - - - - - -
-
-

Navbar example

-

This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.

- View navbar docs » -
-
- - - - - - - - +
+
+

Navbar example

+

This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.

+ View navbar docs » +
+
diff --git a/site/docs/4.1/examples/navbar-static/index.html b/site/docs/4.1/examples/navbar-static/index.html index d723bb439f..4744271b0e 100644 --- a/site/docs/4.1/examples/navbar-static/index.html +++ b/site/docs/4.1/examples/navbar-static/index.html @@ -1,60 +1,37 @@ - - - - - - - - +--- +layout: examples +title: Top navbar example +extra_css: "navbar-top.css" +--- - Top navbar example for Bootstrap + - - - - - - - - - - - -
-
-

Navbar example

-

This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.

- View navbar docs » -
-
- - - - - - - - +
+
+

Navbar example

+

This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.

+ View navbar docs » +
+
diff --git a/site/docs/4.1/examples/navbars/index.html b/site/docs/4.1/examples/navbars/index.html index 4ce1d03315..0da4831410 100644 --- a/site/docs/4.1/examples/navbars/index.html +++ b/site/docs/4.1/examples/navbars/index.html @@ -1,346 +1,323 @@ - - - - - - - - +--- +layout: examples +title: Navbar Template +extra_css: "navbar.css" +--- - Navbar Template for Bootstrap + - - - - - -
+ -
-
+ - + +
+ - - - - - - - +
+
+
+

Navbar examples

+

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 .container. For positioning of navbars, checkout the top and fixed top examples.

+

At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.

+

+ View navbar docs » +

+
+
+
+
diff --git a/site/docs/4.1/examples/offcanvas/index.html b/site/docs/4.1/examples/offcanvas/index.html index 99bd32a1bc..7f6fffe909 100644 --- a/site/docs/4.1/examples/offcanvas/index.html +++ b/site/docs/4.1/examples/offcanvas/index.html @@ -1,158 +1,136 @@ - - - - - - - - +--- +layout: examples +title: Offcanvas template +extra_css: "offcanvas.css" +extra_js: "offcanvas.js" +body_class: "bg-light" +include_holder: true +--- - Offcanvas template for Bootstrap + - +
+
+ +
+
Bootstrap
+ Since 2011 +
+
-
- +
+
Recent updates
+
+ +

+ @username + 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. +

+
+ +

+ @username + 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. +

+
+
+ +

+ @username + 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. +

+
+ + All updates + +
-
-
- -
-
Bootstrap
- Since 2011 +
+
Suggestions
+
+ +
+
+ Full Name + Follow
+ @username
- -
-
Recent updates
-
- -

- @username - 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. -

-
-
- -

- @username - 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. -

-
-
- -

- @username - 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. -

+
+
+ +
+
+ Full Name + Follow
- - All updates - + @username
- -
-
Suggestions
-
- -
-
- Full Name - Follow -
- @username -
-
-
- -
-
- Full Name - Follow -
- @username -
-
-
- -
-
- Full Name - Follow -
- @username -
+
+
+ +
+
+ Full Name + Follow
- - All suggestions - + @username
-
- - - - - - - - - - +
+ + All suggestions + +
+ diff --git a/site/docs/4.1/examples/pricing/index.html b/site/docs/4.1/examples/pricing/index.html index 204b3b18cd..20357c61a6 100644 --- a/site/docs/4.1/examples/pricing/index.html +++ b/site/docs/4.1/examples/pricing/index.html @@ -1,141 +1,110 @@ - - - - - - - - +--- +layout: examples +title: Pricing example +extra_css: "pricing.css" +include_js: false +--- - Pricing example for Bootstrap +
+
Company name
+ + Sign up +
- - +
+

Pricing

+

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.

+
- - - - - - -
-
Company name
- - Sign up +
+
+
+
+

Free

+
+
+

$0 / mo

+
    +
  • 10 users included
    • +
  • 2 GB of storage
    • +
  • Email support
    • +
  • Help center access
    • +
+ +
- -
-

Pricing

-

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.

+
+
+

Pro

+
+
+

$15 / mo

+
    +
  • 20 users included
    • +
  • 10 GB of storage
    • +
  • Priority email support
    • +
  • Help center access
    • +
+ +
- -
-
-
-
-

Free

-
-
-

$0 / mo

-
    -
  • 10 users included
    • -
  • 2 GB of storage
    • -
  • Email support
    • -
  • Help center access
    • -
- -
-
-
-
-

Pro

-
-
-

$15 / mo

-
    -
  • 20 users included
    • -
  • 10 GB of storage
    • -
  • Priority email support
    • -
  • Help center access
    • -
- -
-
-
-
-

Enterprise

-
-
-

$29 / mo

-
    -
  • 30 users included
    • -
  • 15 GB of storage
    • -
  • Phone and email support
    • -
  • Help center access
    • -
- -
-
+
+
+

Enterprise

+
+
+

$29 / mo

+
    +
  • 30 users included
    • +
  • 15 GB of storage
    • +
  • Phone and email support
    • +
  • Help center access
    • +
+
- -
+
- - - - - - - - - - + +
diff --git a/site/docs/4.1/examples/product/index.html b/site/docs/4.1/examples/product/index.html index b18fc903b8..ffba581929 100644 --- a/site/docs/4.1/examples/product/index.html +++ b/site/docs/4.1/examples/product/index.html @@ -1,177 +1,145 @@ - - - - - - - - +--- +layout: examples +title: Product example +extra_css: "product.css" +--- - Product example for Bootstrap + - - +
+
+

Punny headline

+

And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple's marketing pages.

+ Coming soon +
+
+
+
- - - - - - - - -
-
-

Punny headline

-

And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple's marketing pages.

- Coming soon -
-
-
+
+
+
+

Another headline

+

And an even wittier subheading.

- -
-
-
-

Another headline

-

And an even wittier subheading.

-
-
-
-
-
-

Another headline

-

And an even wittier subheading.

-
-
-
+
+
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
-
-
-
-

Another headline

-

And an even wittier subheading.

-
-
-
-
-
-

Another headline

-

And an even wittier subheading.

-
-
-
+
+
+
+

Another headline

+

And an even wittier subheading.

- -
-
-
-

Another headline

-

And an even wittier subheading.

-
-
-
-
-
-

Another headline

-

And an even wittier subheading.

-
-
-
+
+
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
-
-
-
-

Another headline

-

And an even wittier subheading.

-
-
-
-
-
-

Another headline

-

And an even wittier subheading.

-
-
-
+
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
- - +
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
+
+

Another headline

+

And an even wittier subheading.

+
+
+
+
- - - - - - - - - + diff --git a/site/docs/4.1/examples/sign-in/index.html b/site/docs/4.1/examples/sign-in/index.html index 2c94366436..be03ad7054 100644 --- a/site/docs/4.1/examples/sign-in/index.html +++ b/site/docs/4.1/examples/sign-in/index.html @@ -1,36 +1,23 @@ - - - - - - - - +--- +layout: examples +title: Signin Template +extra_css: "signin.css" +body_class: "text-center" +include_js: false +--- - Signin Template for Bootstrap - - - - - - - - - - - - + diff --git a/site/docs/4.1/examples/starter-template/index.html b/site/docs/4.1/examples/starter-template/index.html index f70179fd04..299637fc67 100644 --- a/site/docs/4.1/examples/starter-template/index.html +++ b/site/docs/4.1/examples/starter-template/index.html @@ -1,70 +1,47 @@ - - - - - - - - - - Starter Template for Bootstrap - - - - - - - - - - - - -
- -
-

Bootstrap starter template

-

Use this document as a way to quickly start any new project.
All you get is this text and a mostly barebones HTML document.

-
- -
- - - - - - - - +--- +layout: examples +title: Starter Template +extra_css: "starter-template.css" +--- + + + +
+ +
+

Bootstrap starter template

+

Use this document as a way to quickly start any new project.
All you get is this text and a mostly barebones HTML document.

+
+ +
diff --git a/site/docs/4.1/examples/sticky-footer-navbar/index.html b/site/docs/4.1/examples/sticky-footer-navbar/index.html index 01a1c52704..034a7552b8 100644 --- a/site/docs/4.1/examples/sticky-footer-navbar/index.html +++ b/site/docs/4.1/examples/sticky-footer-navbar/index.html @@ -1,70 +1,49 @@ - - - - - - - - - - Sticky Footer Navbar Template for Bootstrap - - - - - - - - - - -
- - -
- - -
-
-

Sticky footer with fixed navbar

-

Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with padding-top: 60px; on the main > .container.

-

Back to the default sticky footer minus the navbar.

-
-
- -
-
- Place sticky footer content here. -
-
- - - - - - - - +--- +layout: examples +title: Sticky Footer Navbar Template +extra_css: "sticky-footer-navbar.css" +html_class: "h-100" +body_class: "d-flex flex-column h-100" +--- + +
+ + +
+ + +
+
+

Sticky footer with fixed navbar

+

Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with padding-top: 60px; on the main > .container.

+

Back to the default sticky footer minus the navbar.

+
+
+ +
+
+ Place sticky footer content here. +
+
diff --git a/site/docs/4.1/examples/sticky-footer/index.html b/site/docs/4.1/examples/sticky-footer/index.html index 868211c195..828f7a5217 100644 --- a/site/docs/4.1/examples/sticky-footer/index.html +++ b/site/docs/4.1/examples/sticky-footer/index.html @@ -1,36 +1,22 @@ - - - - - - - - +--- +layout: examples +title: Sticky Footer Template +extra_css: "sticky-footer.css" +html_class: "h-100" +body_class: "d-flex flex-column h-100" +--- - Sticky Footer Template for Bootstrap + +
+
+

Sticky footer

+

Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.

+

Use the sticky footer with a fixed navbar if need be, too.

+
+
- - - - - - - - - - -
-
-

Sticky footer

-

Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.

-

Use the sticky footer with a fixed navbar if need be, too.

-
-
- -
-
- Place sticky footer content here. -
-
- - + -- 2.47.3