Change Keep gutters between columns from using no-gutters to gx-0 on rows [#3246993]

Problem/Motivation

no-gutters was removed from Bootstrap 5
https://getbootstrap.com/docs/5.0/layout/gutters/#no-gutters
https://github.com/twbs/bootstrap/blob/v5.1.3/dist/css/bootstrap.css

But it was in Bootstrap 4
https://github.com/twbs/bootstrap/blob/v4.6.1/dist/css/bootstrap.css#L588

rajab@vardot-dev:/var/www/html/products$ grep -rl --exclude-dir={node_modules,bower_components}  "no-gutters" .
./bootstrap_layout_builder/templates/blb-section.html.twig
./bootstrap_layout_builder/src/Plugin/Layout/BootstrapLayout.php
./varbase_layout_builder/templates/vlb-section.html.twig
./vartheme_bs4/VARTHEME_BS4_SUBTHEME/css/base/bootstrap.base.css
./vartheme_bs4/css/base/bootstrap.base.css

#3246862: Remove "px-md-0" from items in Varbase Blog views

In Bootstrap 5 final computed css.

.g-0,
.gx-0 {
  padding-right: 0;
  padding-left: 0;
}

.g-0,
.gy-0 {
  padding-top: 0;
  padding-bottom: 0;
}

In Bootstrap 5 base

.g-0,
.gx-0 {
  --bs-gutter-x: 0;
}

.g-0,
.gy-0 {
  --bs-gutter-y: 0;
}

But no > [class*="col-"] as in Bootstrap 4

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

Proposed resolution

Change to no-gutters gx-0 to support both Bootstrap 5 and Bootstrap 4
And remove the logic of gutters_between_on with gx-0

Remaining tasks

✅ File an issue about this project
✅ Change from no-gutters to no-gutters g-0
✅ Testing to ensure no regression
❌ Automated unit/functional testing coverage
❌ Developer Documentation support on feature change/addition
❌ User Guide Documentation support on feature change/addition
✅ Code review from 1 Varbase core team member
✅ Full testing and approval
✅ Credit contributors
✅ Review with the product owner
❌ Release

User interface changes

The Edit layout and the front-end changes

Edit layout - keep gutters between columns

Test keep gutters between columns

Test keep gutters between columns with Bootstrap grid

Edit layout - NO gutters between columns

Test No gutters between columns

Test NO gutters between columns with Bootstrap grid

API changes

Data model changes

Comment	File	Size	Author
#5	test-bootstrap5-g-0----and----bootstrap4--no-getters.zip	299.64 KB	rajab natshah
#5	test-no-gutters-bootstrap5--grid.png	3.74 MB	rajab natshah
#5	test-no-gutters-bootstrap5.png	13.36 MB	rajab natshah
#5	test-no-gutters-bootstrap4--grid.png	3.19 MB	rajab natshah
#5	test-no-gutters-bootstrap4.png	11.82 MB	rajab natshah
#4	Test Bootstrap 5.png	3.29 MB	rajab natshah
#4	Test Bootstrap 4.png	2.59 MB	rajab natshah
	Test-No-gutters-between-columns-grid.png	1.07 MB	rajab natshah
	Test-No-gutters-between-columns.png	1.09 MB	rajab natshah
	Edit-layout-no-gutters-between-columns.png	1.12 MB	rajab natshah
	Test-Keep-gutters-between-columns--grid.png	1.03 MB	rajab natshah
	Test-Keep-gutters-between-columns.png	1.05 MB	rajab natshah
	Edit-layout-Keep-gutters-between-columns.png	1.03 MB	rajab natshah

Comments

Comment #1

1 November 2021 at 12:46

RajabNatshah created an issue. See original summary.

Comment #2

1 November 2021 at 14:23

RajabNatshah committed ef3377d on 10.0.x

Issue #3246993: Change Keep gutters between columns from using no-...

Comment #3

rajab natshah

he/him

commented 1 November 2021 at 16:46

No gutters equivalents are not working will in Bootstrap 5
https://getbootstrap.com/docs/5.0/layout/gutters/#no-gutters

The gutters between columns in our predefined grid classes can be removed with .g-0. This removes the negative margins from .row and the horizontal padding from all immediate children columns.

Same: their example is not working too in a real case

<div class="row g-0">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

In Bootstrap 5 final computed css.

.g-0,
.gx-0 {
  padding-right: 0;
  padding-left: 0;
}

.g-0,
.gy-0 {
  padding-top: 0;
  padding-bottom: 0;
}

In Bootstrap 5 base

.g-0,
.gx-0 {
  --bs-gutter-x: 0;
}

.g-0,
.gy-0 {
  --bs-gutter-y: 0;
}

But no > [class*="col-"] as in Bootstrap 4

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

Comment #4

rajab natshah

he/him

commented 2 November 2021 at 09:59

Issue summary:

View changes

Status	File	Size
new	Test Bootstrap 4.png	2.59 MB
new	Test Bootstrap 5.png	3.29 MB

Comment #5

rajab natshah

he/him

commented 2 November 2021 at 10:03

Issue summary:

View changes

Status	File	Size
new	test-no-gutters-bootstrap4.png	11.82 MB
new	test-no-gutters-bootstrap4--grid.png	3.19 MB
new	test-no-gutters-bootstrap5.png	13.36 MB
new	test-no-gutters-bootstrap5--grid.png	3.74 MB
new	test-bootstrap5-g-0----and----bootstrap4--no-getters.zip	299.64 KB

Test bootstrap 4 and no gutters

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

    <title>Test bootstrap 4 and no gutters</title>
  </head>
  <body>
    <h1 class="text-center">Test bootstrap 4 and no gutters</h1>

    <hr />
    <h2 class="text-center">No outer container + No inner container + gutters ( edge-to-edge )</h2>
    <div class="no-container">
      <div class="row">
          <div class="col-12">
            <div class="no-container">
                <div class="row">
                  <div class="col-sm-6 bg-dark"><img class="img-fluid" src="images/coworking-1.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                  <div class="col-sm-6 bg-info"><img class="img-fluid" src="images/coworking-4.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                </div>
            </div>
        </div>
      </div>
    </div>

    <hr />
    <h2 class="text-center">No outer container + No inner container + no-gutters ( edge-to-edge )</h2>
    <div class="no-container">
      <div class="row">
          <div class="col-12">
            <div class="no-container">
                <div class="row no-gutters">
                  <div class="col-sm-6 bg-dark"><img class="img-fluid" src="images/coworking-1.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                  <div class="col-sm-6 bg-info"><img class="img-fluid" src="images/coworking-4.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                </div>
            </div>
        </div>
      </div>
    </div>

    <hr />
    <h2 class="text-center">No outer container + No inner container + g-0 ( edge-to-edge )</h2>
    <div class="no-container">
      <div class="row">
          <div class="col-12">
            <div class="no-container">
                <div class="row g-0">
                  <div class="col-sm-6 bg-dark"><img class="img-fluid" src="images/coworking-1.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                  <div class="col-sm-6 bg-info"><img class="img-fluid" src="images/coworking-4.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                </div>
            </div>
        </div>
      </div>
    </div>
    <hr />

    <hr />
    <h2 class="text-center">Outer container + Inner container + Gutters</h2>
    <div class="container">
      <div class="row">
          <div class="col-12">
            <div class="container">
                <div class="row">
                  <div class="col-sm-6 bg-dark"><img class="img-fluid" src="images/coworking-1.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                  <div class="col-sm-6 bg-info"><img class="img-fluid" src="images/coworking-4.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                </div>
            </div>
        </div>
      </div>
    </div>

    <hr />
    <h2 class="text-center">Outer container + Inner container + no-gutters</h2>
    <div class="container">
      <div class="row">
          <div class="col-12">
            <div class="container">
                <div class="row no-gutters">
                  <div class="col-sm-6 bg-dark"><img class="img-fluid" src="images/coworking-1.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                  <div class="col-sm-6 bg-info"><img class="img-fluid" src="images/coworking-4.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                </div>
            </div>
        </div>
      </div>
    </div>

    <hr />
    <h2 class="text-center">Outer container + Inner container + g-0</h2>
    <div class="container">
      <div class="row">
          <div class="col-12">
            <div class="container">
                <div class="row g-0">
                  <div class="col-sm-6 bg-dark"><img class="img-fluid" src="images/coworking-1.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                  <div class="col-sm-6 bg-info"><img class="img-fluid" src="images/coworking-4.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                </div>
            </div>
        </div>
      </div>
    </div>

    <hr />
    <h2 class="text-center">Outer container + No inner container + gutters</h2>
    <div class="container">
      <div class="row">
          <div class="col-12">
            <div class="no-container">
                <div class="row">
                  <div class="col-sm-6 bg-dark"><img class="img-fluid" src="images/coworking-1.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                  <div class="col-sm-6 bg-info"><img class="img-fluid" src="images/coworking-4.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                </div>
            </div>
        </div>
      </div>
    </div>

    <hr />
    <h2 class="text-center">Outer container + No inner container + no-gutters</h2>
    <div class="container">
      <div class="row">
          <div class="col-12">
            <div class="no-container">
                <div class="row no-gutters">
                  <div class="col-sm-6 bg-dark"><img class="img-fluid" src="images/coworking-1.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                  <div class="col-sm-6 bg-info"><img class="img-fluid" src="images/coworking-4.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                </div>
            </div>
        </div>
      </div>
    </div>

    <hr />
    <h2 class="text-center">Outer container + No inner container + g-0</h2>
    <div class="container">
      <div class="row">
          <div class="col-12">
            <div class="no-container">
                <div class="row g-0">
                  <div class="col-sm-6 bg-dark"><img class="img-fluid" src="images/coworking-1.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                  <div class="col-sm-6 bg-info"><img class="img-fluid" src="images/coworking-4.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                </div>
            </div>
        </div>
      </div>
    </div>



    <hr />
  </body>
</html>

Test bootstrap 5 and no gutters

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Test bootstrap 5 and no gutters</title>
  </head>
  <body>
    <h1 class="text-center">Test bootstrap 5 and no gutters</h1>

    <hr />
    <h2 class="text-center">No outer container + No inner container + gutters ( edge-to-edge )</h2>
    <div class="no-container">
      <div class="row">
          <div class="col-12">
            <div class="no-container">
                <div class="row">
                  <div class="col-sm-6 bg-dark"><img class="img-fluid" src="images/coworking-1.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                  <div class="col-sm-6 bg-info"><img class="img-fluid" src="images/coworking-4.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                </div>
            </div>
        </div>
      </div>
    </div>

    <hr />
    <h2 class="text-center">No outer container + No inner container + no-gutters ( edge-to-edge )</h2>
    <div class="no-container">
      <div class="row">
          <div class="col-12">
            <div class="no-container">
                <div class="row no-gutters">
                  <div class="col-sm-6 bg-dark"><img class="img-fluid" src="images/coworking-1.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                  <div class="col-sm-6 bg-info"><img class="img-fluid" src="images/coworking-4.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                </div>
            </div>
        </div>
      </div>
    </div>

    <hr />
    <h2 class="text-center">No outer container + No inner container + g-0 ( edge-to-edge )</h2>
    <div class="no-container">
      <div class="row">
          <div class="col-12">
            <div class="no-container">
                <div class="row g-0">
                  <div class="col-sm-6 bg-dark"><img class="img-fluid" src="images/coworking-1.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                  <div class="col-sm-6 bg-info"><img class="img-fluid" src="images/coworking-4.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                </div>
            </div>
        </div>
      </div>
    </div>
    <hr />

    <hr />
    <h2 class="text-center">Outer container + Inner container + Gutters</h2>
    <div class="container">
      <div class="row">
          <div class="col-12">
            <div class="container">
                <div class="row">
                  <div class="col-sm-6 bg-dark"><img class="img-fluid" src="images/coworking-1.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                  <div class="col-sm-6 bg-info"><img class="img-fluid" src="images/coworking-4.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                </div>
            </div>
        </div>
      </div>
    </div>

    <hr />
    <h2 class="text-center">Outer container + Inner container + no-gutters</h2>
    <div class="container">
      <div class="row">
          <div class="col-12">
            <div class="container">
                <div class="row no-gutters">
                  <div class="col-sm-6 bg-dark"><img class="img-fluid" src="images/coworking-1.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                  <div class="col-sm-6 bg-info"><img class="img-fluid" src="images/coworking-4.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                </div>
            </div>
        </div>
      </div>
    </div>

    <hr />
    <h2 class="text-center">Outer container + Inner container + g-0</h2>
    <div class="container">
      <div class="row">
          <div class="col-12">
            <div class="container">
                <div class="row g-0">
                  <div class="col-sm-6 bg-dark"><img class="img-fluid" src="images/coworking-1.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                  <div class="col-sm-6 bg-info"><img class="img-fluid" src="images/coworking-4.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                </div>
            </div>
        </div>
      </div>
    </div>

    <hr />
    <h2 class="text-center">Outer container + No inner container + gutters</h2>
    <div class="container">
      <div class="row">
          <div class="col-12">
            <div class="no-container">
                <div class="row">
                  <div class="col-sm-6 bg-dark"><img class="img-fluid" src="images/coworking-1.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                  <div class="col-sm-6 bg-info"><img class="img-fluid" src="images/coworking-4.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                </div>
            </div>
        </div>
      </div>
    </div>

    <hr />
    <h2 class="text-center">Outer container + No inner container + no-gutters</h2>
    <div class="container">
      <div class="row">
          <div class="col-12">
            <div class="no-container">
                <div class="row no-gutters">
                  <div class="col-sm-6 bg-dark"><img class="img-fluid" src="images/coworking-1.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                  <div class="col-sm-6 bg-info"><img class="img-fluid" src="images/coworking-4.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                </div>
            </div>
        </div>
      </div>
    </div>

    <hr />
    <h2 class="text-center">Outer container + No inner container + g-0</h2>
    <div class="container">
      <div class="row">
          <div class="col-12">
            <div class="no-container">
                <div class="row g-0">
                  <div class="col-sm-6 bg-dark"><img class="img-fluid" src="images/coworking-1.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                  <div class="col-sm-6 bg-info"><img class="img-fluid" src="images/coworking-4.jpg" alt="test" title="test" typeof="foaf:Image"></div>
                </div>
            </div>
        </div>
      </div>
    </div>



    <hr />
  </body>
</html>

Comment #6

rajab natshah

he/him

commented 2 November 2021 at 10:14

Title:

Change Keep gutters between columns from using no-gutters to g-0 on rows

» Change Keep gutters between columns from using no-gutters to "no-gutters g-0" on rows

Comment #7

rajab natshah

he/him

commented 2 November 2021 at 10:18

Issue summary:

View changes

Changed to no-gutters g-0 to support both Bootstrap 5 and Bootstrap 4

Comment #8

rajab natshah

he/him

commented 2 November 2021 at 10:35

Issue summary:

View changes

Comment #9

2 November 2021 at 10:38

RajabNatshah committed a7f0d2f on 10.0.x

Issue #3246993: Change Keep gutters between columns from using no-...

Comment #10

rajab natshah

he/him

commented 2 November 2021 at 17:30

Title:

Change Keep gutters between columns from using no-gutters to "no-gutters g-0" on rows

» Change Keep gutters between columns from using no-gutters to "no-gutters gx-0" on rows

Comment #11

rajab natshah

he/him

commented 2 November 2021 at 17:30

Issue summary:

View changes

Comment #12

rajab natshah

he/him

commented 2 November 2021 at 17:32

Changed to no-gutters gx-0 to support both Bootstrap 5 and Bootstrap 4
And removed the logic of gutters_between_on with gx-0

Comment #13

rajab natshah

he/him

commented 2 November 2021 at 17:41

Issue summary:

View changes

Comment #14

2 November 2021 at 17:55

RajabNatshah committed 79f4c82 on 10.0.x

Issue #3246993: Change Keep gutters between columns from using no-...

Comment #15

rajab natshah

he/him

commented 3 November 2021 at 21:21

Assigned:	rajab natshah	» mohammed j. razem
Status:	Active	» Needs review

Comment #16

rajab natshah

he/him

commented 8 November 2021 at 12:32

Assigned:

mohammed j. razem

» Unassigned

Comment #17

rajab natshah

he/him

commented 8 November 2021 at 12:33

Issue summary:

View changes

Comment #18

12 December 2021 at 08:49

RajabNatshah committed 41d181d on 10.0.x

Revert changes in the 10.0.x as it was moved to the 10.1.x branch -...

Comment #19

rajab natshah

he/him

commented 11 January 2022 at 10:23

Version:

10.0.x-dev

» 10.1.x-dev

Comment #20

rajab natshah

he/him

commented 11 January 2022 at 11:01

Title:

Change Keep gutters between columns from using no-gutters to "no-gutters gx-0" on rows

» Change Keep gutters between columns from using no-gutters to gx-0 on rows

Comment #21

rajab natshah

he/him

commented 30 January 2022 at 16:21

Status:	Needs review	» Fixed
Issue tags:		+varbase-9.1.0-beta1

Comment #22

13 February 2022 at 16:24

Status:

Fixed

» Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

Change Keep gutters between columns from using no-gutters to gx-0 on rows

Problem/Motivation

Proposed resolution

Remaining tasks

User interface changes

Edit layout - keep gutters between columns

Test keep gutters between columns

Test keep gutters between columns with Bootstrap grid

Edit layout - NO gutters between columns

Test No gutters between columns

Test NO gutters between columns with Bootstrap grid

API changes

Data model changes

Comments

Test bootstrap 4 and no gutters

Test bootstrap 5 and no gutters

Related issues

Referenced by