From df8f64d19554af7dc83fcfdd0cb980b6c1b0603c Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Sat, 28 Sep 2019 16:16:03 +0200 Subject: [PATCH] Update examples to the Bootstrap 5 grid --- .../docs/4.3/examples/album/index.html | 38 +++---- .../content/docs/4.3/examples/blog/index.html | 4 +- .../docs/4.3/examples/carousel/index.html | 8 +- .../docs/4.3/examples/checkout/index.html | 107 ++++++++++-------- site/content/docs/4.3/examples/grid/grid.css | 8 +- .../content/docs/4.3/examples/grid/index.html | 40 +++++++ .../4.3/examples/navbar-bottom/index.html | 2 +- .../docs/4.3/examples/navbar-fixed/index.html | 8 +- .../4.3/examples/navbar-static/index.html | 8 +- .../docs/4.3/examples/navbars/index.html | 34 +++--- .../docs/4.3/examples/offcanvas/index.html | 24 ++-- .../4.3/examples/starter-template/index.html | 8 +- .../examples/sticky-footer-navbar/index.html | 8 +- 13 files changed, 173 insertions(+), 124 deletions(-) diff --git a/site/content/docs/4.3/examples/album/index.html b/site/content/docs/4.3/examples/album/index.html index 748987e4a8..05e80a0328 100644 --- a/site/content/docs/4.3/examples/album/index.html +++ b/site/content/docs/4.3/examples/album/index.html @@ -53,9 +53,9 @@ title: Album example
-
-
-
+
+
+
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}

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

@@ -69,8 +69,8 @@ title: Album example
-
-
+
+
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}

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

@@ -84,8 +84,8 @@ title: Album example
-
-
+
+
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}

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

@@ -100,8 +100,8 @@ title: Album example
-
-
+
+
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}

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

@@ -115,8 +115,8 @@ title: Album example
-
-
+
+
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}

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

@@ -130,8 +130,8 @@ title: Album example
-
-
+
+
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}

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

@@ -146,8 +146,8 @@ title: Album example
-
-
+
+
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}

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

@@ -161,8 +161,8 @@ title: Album example
-
-
+
+
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}

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

@@ -176,8 +176,8 @@ title: Album example
-
-
+
+
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}

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

diff --git a/site/content/docs/4.3/examples/blog/index.html b/site/content/docs/4.3/examples/blog/index.html index c41f7f9f6b..4baee1942d 100644 --- a/site/content/docs/4.3/examples/blog/index.html +++ b/site/content/docs/4.3/examples/blog/index.html @@ -52,7 +52,7 @@ include_js: false
-
+
World

Featured post

@@ -66,7 +66,7 @@ include_js: false
-
+
Design

Post title

diff --git a/site/content/docs/4.3/examples/carousel/index.html b/site/content/docs/4.3/examples/carousel/index.html index 3ce8367b8d..2e824c4e07 100644 --- a/site/content/docs/4.3/examples/carousel/index.html +++ b/site/content/docs/4.3/examples/carousel/index.html @@ -13,7 +13,7 @@ extra_css:
diff --git a/site/content/docs/4.3/examples/checkout/index.html b/site/content/docs/4.3/examples/checkout/index.html index 204c95b6b3..b351fda5c7 100644 --- a/site/content/docs/4.3/examples/checkout/index.html +++ b/site/content/docs/4.3/examples/checkout/index.html @@ -2,7 +2,7 @@ layout: examples title: Checkout example extra_css: - - "form-validation.css" +- "form-validation.css" extra_js: - src: "form-validation.js" body_class: "bg-light" @@ -15,8 +15,8 @@ body_class: "bg-light"

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 @@ -65,62 +65,61 @@ body_class: "bg-light"

-
+

Billing address

-
-
+
+
Valid first name is required.
-
+ +
Valid last name is required.
-
-
- -
-
- @ -
- -
- Your username is required. +
+ +
+
+ @ +
+ +
+ Your username is required. +
-
-
- - -
- Please enter a valid email address for shipping updates. +
+ + +
+ Please enter a valid email address for shipping updates. +
-
-
- - -
- Please enter your shipping address. +
+ + +
+ Please enter your shipping address. +
-
-
- - -
+
+ + +
-
-
+
@@ -140,7 +140,8 @@ body_class: "bg-light" Please provide a valid state.
-
+ +
@@ -148,20 +149,24 @@ body_class: "bg-light"
-
+ +
+
+
-
+ +

Payment

-
+
@@ -175,8 +180,9 @@ body_class: "bg-light"
-
-
+ +
+
Full name as displayed on card @@ -184,23 +190,24 @@ body_class: "bg-light" Name on card is required
-
+ +
Credit card number is required
-
-
-
+ +
Expiration date required
-
+ +
@@ -208,7 +215,9 @@ body_class: "bg-light"
-
+ +
+
diff --git a/site/content/docs/4.3/examples/grid/grid.css b/site/content/docs/4.3/examples/grid/grid.css index 8032c31c3e..18e3568b1b 100644 --- a/site/content/docs/4.3/examples/grid/grid.css +++ b/site/content/docs/4.3/examples/grid/grid.css @@ -1,13 +1,13 @@ .themed-grid-col { - padding-top: 15px; - padding-bottom: 15px; + padding-top: .75rem; + padding-bottom: .75rem; background-color: rgba(86, 61, 124, .15); border: 1px solid rgba(86, 61, 124, .2); } .themed-container { - padding: 15px; - margin-bottom: 30px; + padding: .75rem; + margin-bottom: 1.5rem; background-color: rgba(0, 123, 255, .15); border: 1px solid rgba(0, 123, 255, .2); } diff --git a/site/content/docs/4.3/examples/grid/index.html b/site/content/docs/4.3/examples/grid/index.html index 1440cb7345..0d32279f39 100644 --- a/site/content/docs/4.3/examples/grid/index.html +++ b/site/content/docs/4.3/examples/grid/index.html @@ -54,6 +54,14 @@ include_js: false
.col-md-4
+

Three equal columns alternative

+

By using the .row-cols-* classes, you can easily create a grid with equal columns.

+
+
.col child of .row-cols-md-3
+
.col child of .row-cols-md-3
+
.col child of .row-cols-md-3
+
+

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.

@@ -124,9 +132,41 @@ include_js: false
.col-6 .col-sm-4
+
+ +

Gutters

+

With .gx-* classes, the horizontal gutters can be adjusted.

+
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
.col with .gx-4 gutters
+
+

Use the .gy-* classes to control the vertical gutters.

+
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
.col with .gy-4 gutters
+
+

With .g-* classes, the gutters in both directions can be adjusted.

+
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
.col with .g-3 gutters
+
+
+

Containers

Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint.

diff --git a/site/content/docs/4.3/examples/navbar-bottom/index.html b/site/content/docs/4.3/examples/navbar-bottom/index.html index af8ffd53e0..fadf357377 100644 --- a/site/content/docs/4.3/examples/navbar-bottom/index.html +++ b/site/content/docs/4.3/examples/navbar-bottom/index.html @@ -17,7 +17,7 @@ title: Bottom navbar example diff --git a/site/content/docs/4.3/examples/navbar-static/index.html b/site/content/docs/4.3/examples/navbar-static/index.html index 07b36d37ca..4043587f78 100644 --- a/site/content/docs/4.3/examples/navbar-static/index.html +++ b/site/content/docs/4.3/examples/navbar-static/index.html @@ -12,7 +12,7 @@ extra_css:
diff --git a/site/content/docs/4.3/examples/navbars/index.html b/site/content/docs/4.3/examples/navbars/index.html index 4879a96a87..ad2649cc34 100644 --- a/site/content/docs/4.3/examples/navbars/index.html +++ b/site/content/docs/4.3/examples/navbars/index.html @@ -13,7 +13,7 @@ extra_css: -
+
@@ -55,7 +55,7 @@ extra_css: Link -
+
@@ -70,7 +70,7 @@ extra_css: -
+
@@ -104,7 +104,7 @@ extra_css: -
+
@@ -138,7 +138,7 @@ extra_css: -
+
@@ -172,7 +172,7 @@ extra_css: -
+
@@ -206,7 +206,7 @@ extra_css: -
+
@@ -240,7 +240,7 @@ extra_css: -
+
@@ -309,7 +309,7 @@ extra_css: -
+
diff --git a/site/content/docs/4.3/examples/offcanvas/index.html b/site/content/docs/4.3/examples/offcanvas/index.html index 442aa844e2..bb26ffc581 100644 --- a/site/content/docs/4.3/examples/offcanvas/index.html +++ b/site/content/docs/4.3/examples/offcanvas/index.html @@ -16,7 +16,7 @@ body_class: "bg-light" -
- - + + +
@@ -73,24 +73,24 @@ body_class: "bg-light"
-
Recent updates
+
Recent updates
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}} -

+

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

{{< placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="flex-shrink-0 mr-2 rounded" >}} -

+

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

{{< placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="flex-shrink-0 mr-2 rounded" >}} -

+

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

@@ -101,10 +101,10 @@ body_class: "bg-light"
-
Suggestions
+
Suggestions
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}} -
+
Full Name Follow @@ -114,7 +114,7 @@ body_class: "bg-light"
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}} -
+
Full Name Follow @@ -124,7 +124,7 @@ body_class: "bg-light"
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 mr-2 rounded" >}} -
+
Full Name Follow diff --git a/site/content/docs/4.3/examples/starter-template/index.html b/site/content/docs/4.3/examples/starter-template/index.html index a53a033cc9..91701691fe 100644 --- a/site/content/docs/4.3/examples/starter-template/index.html +++ b/site/content/docs/4.3/examples/starter-template/index.html @@ -13,7 +13,7 @@ extra_css: -
- - + + +
diff --git a/site/content/docs/4.3/examples/sticky-footer-navbar/index.html b/site/content/docs/4.3/examples/sticky-footer-navbar/index.html index 937fb8dc4d..6620c69411 100644 --- a/site/content/docs/4.3/examples/sticky-footer-navbar/index.html +++ b/site/content/docs/4.3/examples/sticky-footer-navbar/index.html @@ -16,7 +16,7 @@ body_class: "d-flex flex-column h-100"