From aa7e326a393b223c07a65885b673d44aa2671979 Mon Sep 17 00:00:00 2001
From: Daniel O <dobiekwe@byteworks.com.ng>
Date: Tue, 1 Nov 2022 10:46:38 +0100
Subject: [PATCH 1/4] Grid Gap Updates
- added column-gap
- added row-gap
---
scss/_utilities.scss | 12 ++++++++
site/content/docs/5.2/utilities/spacing.md | 34 ++++++++++++++++++----
2 files changed, 41 insertions(+), 5 deletions(-)
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index d69f89a982..a8c8b89a79 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -472,6 +472,18 @@ $utilities: map-merge(
class: gap,
values: $spacers
),
+ "row-gap": (
+ responsive: true,
+ property: row-gap,
+ class: row-gap,
+ values: $spacers
+ ),
+ "column-gap": (
+ responsive: true,
+ property: column-gap,
+ class: column-gap,
+ values: $spacers
+ ),
// scss-docs-end utils-spacing
// Text
// scss-docs-start utils-text
diff --git a/site/content/docs/5.2/utilities/spacing.md b/site/content/docs/5.2/utilities/spacing.md
index 1e5f6d32f4..ee587f85e8 100644
--- a/site/content/docs/5.2/utilities/spacing.md
+++ b/site/content/docs/5.2/utilities/spacing.md
@@ -100,18 +100,42 @@ The syntax is nearly the same as the default, positive margin utilities, but wit
## Gap
-When using `display: grid`, you can make use of `gap` utilities on the parent grid container. This can save on having to add margin utilities to individual grid items (children of a `display: grid` container). Gap utilities are responsive by default, and are generated via our utilities API, based on the `$spacers` Sass map.
+When using `display: grid` or `display: flex`, you can make use of `gap` utilities on the parent grid container. This can save on having to add margin utilities to individual grid items (children of a `grid` or `flex` container). Gap utilities are responsive by default, and are generated via our utilities API, based on the `$spacers` Sass map.
{{< example html >}}
-<div class="d-grid gap-3">
- <div class="p-2 bg-light border">Grid item 1</div>
- <div class="p-2 bg-light border">Grid item 2</div>
- <div class="p-2 bg-light border">Grid item 3</div>
+<div class="grid gap-3" >
+ <div class="p-2 bg-light border g-col-6">Grid item 1</div>
+ <div class="p-2 bg-light border g-col-6">Grid item 2</div>
+ <div class="p-2 bg-light border g-col-6">Grid item 3</div>
+ <div class="p-2 bg-light border g-col-6">Grid item 4</div>
</div>
{{< /example >}}
Support includes responsive options for all of Bootstrap's grid breakpoints, as well as six sizes from the `$spacers` map (`0`–`5`). There is no `.gap-auto` utility class as it's effectively the same as `.gap-0`.
+### row-gap
+`row-gap` behaves just like `gap` except it specifies the size of the gap between an element's rows only.
+{{< example html >}}
+<div class="grid gap-0 row-gap-3" >
+ <div class="p-2 bg-light border g-col-6">Grid item 1</div>
+ <div class="p-2 bg-light border g-col-6">Grid item 2</div>
+ <div class="p-2 bg-light border g-col-6">Grid item 3</div>
+ <div class="p-2 bg-light border g-col-6">Grid item 4</div>
+</div>
+{{< /example >}}
+
+### column-gap
+`column-gap` behaves just like `gap` as well, except it specifies the size of the gap between an element's columns only.
+{{< example html >}}
+<div class="grid gap-0 column-gap-3" >
+ <div class="p-2 bg-light border g-col-6">Grid item 1</div>
+ <div class="p-2 bg-light border g-col-6">Grid item 2</div>
+ <div class="p-2 bg-light border g-col-6">Grid item 3</div>
+ <div class="p-2 bg-light border g-col-6">Grid item 4</div>
+</div>
+{{< /example >}}
+
+
## Sass
### Maps
--
GitLab
From 01ce26a13a098ad3aae5a26cff78afaad2d0adb4 Mon Sep 17 00:00:00 2001
From: Daniel O <dobiekwe@byteworks.com.ng>
Date: Tue, 1 Nov 2022 11:23:50 +0100
Subject: [PATCH 2/4] Grid Gap Updates
---
site/content/docs/5.2/utilities/spacing.md | 8 +++++---
1 file changed, 5 insertions(+), 3 deletions(-)
diff --git a/site/content/docs/5.2/utilities/spacing.md b/site/content/docs/5.2/utilities/spacing.md
index ee587f85e8..1099bb96ed 100644
--- a/site/content/docs/5.2/utilities/spacing.md
+++ b/site/content/docs/5.2/utilities/spacing.md
@@ -102,7 +102,7 @@ The syntax is nearly the same as the default, positive margin utilities, but wit
When using `display: grid` or `display: flex`, you can make use of `gap` utilities on the parent grid container. This can save on having to add margin utilities to individual grid items (children of a `grid` or `flex` container). Gap utilities are responsive by default, and are generated via our utilities API, based on the `$spacers` Sass map.
-{{< example html >}}
+{{< example >}}
<div class="grid gap-3" >
<div class="p-2 bg-light border g-col-6">Grid item 1</div>
<div class="p-2 bg-light border g-col-6">Grid item 2</div>
@@ -115,7 +115,8 @@ Support includes responsive options for all of Bootstrap's grid breakpoints, as
### row-gap
`row-gap` behaves just like `gap` except it specifies the size of the gap between an element's rows only.
-{{< example html >}}
+
+{{< example >}}
<div class="grid gap-0 row-gap-3" >
<div class="p-2 bg-light border g-col-6">Grid item 1</div>
<div class="p-2 bg-light border g-col-6">Grid item 2</div>
@@ -126,7 +127,8 @@ Support includes responsive options for all of Bootstrap's grid breakpoints, as
### column-gap
`column-gap` behaves just like `gap` as well, except it specifies the size of the gap between an element's columns only.
-{{< example html >}}
+
+{{< example >}}
<div class="grid gap-0 column-gap-3" >
<div class="p-2 bg-light border g-col-6">Grid item 1</div>
<div class="p-2 bg-light border g-col-6">Grid item 2</div>
--
GitLab
From 0ec52d95cc1290a672194c3e41617e7571b1dc74 Mon Sep 17 00:00:00 2001
From: Daniel O <dobiekwe@byteworks.com.ng>
Date: Wed, 2 Nov 2022 14:13:08 +0100
Subject: [PATCH 3/4] Bundlewatch update
---
.bundlewatch.config.json | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 105c8c1580..5993996087 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -18,19 +18,19 @@
},
{
"path": "./dist/css/bootstrap-utilities.css",
- "maxSize": "9.25 kB"
+ "maxSize": "9.75 kB"
},
{
"path": "./dist/css/bootstrap-utilities.min.css",
- "maxSize": "8.5 kB"
+ "maxSize": "9.0 kB"
},
{
"path": "./dist/css/bootstrap.css",
- "maxSize": "29.75 kB"
+ "maxSize": "30.25 kB"
},
{
"path": "./dist/css/bootstrap.min.css",
- "maxSize": "27.5 kB"
+ "maxSize": "28 kB"
},
{
"path": "./dist/js/bootstrap.bundle.js",
--
GitLab
From 23452d4d617d2357419bc03e7a355c6bc036d94d Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Mon, 14 Nov 2022 15:21:23 -0800
Subject: [PATCH 4/4] Apply suggestions from code review
---
site/content/docs/5.2/utilities/spacing.md | 9 +++++----
1 file changed, 5 insertions(+), 4 deletions(-)
diff --git a/site/content/docs/5.2/utilities/spacing.md b/site/content/docs/5.2/utilities/spacing.md
index 1099bb96ed..c8425d4a9c 100644
--- a/site/content/docs/5.2/utilities/spacing.md
+++ b/site/content/docs/5.2/utilities/spacing.md
@@ -100,7 +100,7 @@ The syntax is nearly the same as the default, positive margin utilities, but wit
## Gap
-When using `display: grid` or `display: flex`, you can make use of `gap` utilities on the parent grid container. This can save on having to add margin utilities to individual grid items (children of a `grid` or `flex` container). Gap utilities are responsive by default, and are generated via our utilities API, based on the `$spacers` Sass map.
+When using `display: grid` or `display: flex`, you can make use of `gap` utilities on the parent element. This can save on having to add margin utilities to individual children of a grid or flex container. Gap utilities are responsive by default, and are generated via our utilities API, based on the `$spacers` Sass map.
{{< example >}}
<div class="grid gap-3" >
@@ -114,7 +114,8 @@ When using `display: grid` or `display: flex`, you can make use of `gap` utiliti
Support includes responsive options for all of Bootstrap's grid breakpoints, as well as six sizes from the `$spacers` map (`0`–`5`). There is no `.gap-auto` utility class as it's effectively the same as `.gap-0`.
### row-gap
-`row-gap` behaves just like `gap` except it specifies the size of the gap between an element's rows only.
+
+`row-gap` sets the vertical space between children items in the specified container.
{{< example >}}
<div class="grid gap-0 row-gap-3" >
@@ -126,7 +127,8 @@ Support includes responsive options for all of Bootstrap's grid breakpoints, as
{{< /example >}}
### column-gap
-`column-gap` behaves just like `gap` as well, except it specifies the size of the gap between an element's columns only.
+
+`column-gap` sets the horizontal space between children items in the specified container.
{{< example >}}
<div class="grid gap-0 column-gap-3" >
@@ -137,7 +139,6 @@ Support includes responsive options for all of Bootstrap's grid breakpoints, as
</div>
{{< /example >}}
-
## Sass
### Maps
--
GitLab