How do I get Bootstrap grid gy-5 to work?

Question

If I have a bootstrap grid. There is no space between the rows despite the gy-5

However if I change class="grid" to class="row" then there is space. But that doesn't make sense to me, why would I want a row of 3 rows? There's something I don't understand about how this works.

Fiddle here: https://jsfiddle.net/xpusostomos/03wqa5x6/2/

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

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

<body>
  <div class="grid">
    <div class="row gy-5">
      <div class="col-md-2">
        Select:
      </div>
      
      <div class="col-md-4">
        <label class="form-check-label" for="mapped">
                    <input id="mapped" class="form-check-input" type="checkbox" [(ngModel)]="mapped"
                           (change)="change(true)"/>
                    Mapped</label>
      </div>
      <div class="col-md-5">
        <label class="form-check-label" for="unmapped">
                    <input id="unmapped" class="form-check-input" type="checkbox" [(ngModel)]="unmapped"
                           (change)="change(true)"/>
                    Unmapped</label>
      </div>
    </div>
    
    <div class="row gy-5">
      <div class="col-md-2">
        Show:
      </div>
      
      <div class="col-md-4">
        <label class="form-check-label" for="summary">
                    <input id="summary" class="form-check-input" type="radio" [(ngModel)]="detail" [value]="false"
                           (change)="change(false)"/>
                    Summary</label>
      </div>
      <div class="col-md-5">
        <label class="form-check-label" for="detail">
                    <input id="detail" class="form-check-input" type="radio" [(ngModel)]="detail" [value]="true"
                           (change)="change(false)"/>
                    Detail</label>
      </div>
    </div>
    
    <div class="row gy-5">
      <div class="col-md-2">
        Group:
      </div>
      
      <div class="col-md-10">
        <label class="form-check-label" for="detail">
                    <input id="mapGrouped" class="form-check-input" type="checkbox" [(ngModel)]="mapGrouped"
                           [value]="true" (change)="change()"/>
                    Mapped Status</label>
      </div>
    </div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

You can start by eliminating possible errors and start writing HTML without syntax errors. Your class attribute is missing the final `"` character. — cloned, Apr 05 '22 at 13:16

Carol Skelly · Answer 1 · 2022-04-06T17:47:27.290

Gutters are for spacing between columns not rows. Therefore if you want vertical spacing between the columns as they stack vertically, your columns should all be in the same row...

<div class="container">
    <div class="row gy-5">
        <div class="col-md-2"> Select: </div>
        <div class="col-md-4">
            <label class="form-check-label" for="mapped">
                <input id="mapped" class="form-check-input" type="checkbox" [(ngModel)]="mapped" (change)="change(true)" /> Mapped</label>
        </div>
        <div class="col-md-5">
            <label class="form-check-label" for="unmapped">
                <input id="unmapped" class="form-check-input" type="checkbox" [(ngModel)]="unmapped" (change)="change(true)" /> Unmapped</label>
        </div>
        <div class="col-md-2"> Show: </div>
        <div class="col-md-4">
            <label class="form-check-label" for="summary">
                <input id="summary" class="form-check-input" type="radio" [(ngModel)]="detail" [value]="false" (change)="change(false)" /> Summary</label>
        </div>
        <div class="col-md-5">
            <label class="form-check-label" for="detail">
                <input id="detail" class="form-check-input" type="radio" [(ngModel)]="detail" [value]="true" (change)="change(false)" /> Detail</label>
        </div>
        <div class="col-md-2"> Group: </div>
        <div class="col-md-10">
            <label class="form-check-label" for="detail">
                <input id="mapGrouped" class="form-check-input" type="checkbox" [(ngModel)]="mapGrouped" [value]="true" (change)="change()" /> Mapped Status</label>
        </div>
    </div>
</div>

https://codeply.com/p/kTJczRmHhq

Understand that using more that 12 column units inside a single .row creates a "virtual" row which is in essence how the responsive Bootstrap grid works.

Note: the grid class is for display:grid which is an alternate to row which is for (display:flex) so you'd use one or the other not both.

So if I understand you correctly, I should do the math so that every 12 spacing is how I get to a new row? — xpusostomos, Apr 07 '22 at 00:56
So what is the point of the if it isn't actually a row? If you can't sensibly have more than one row, why is it designed like this? — xpusostomos, Apr 07 '22 at 01:03
You need to understand how the grid and breakpoints work. `row` is a flexbox container for columns, so there's no reason to repeat row in your case since the columns need to relate to each other. Columns that share the same parent 'row' may have different horizontal or vertical layout depending on the breakpoints you define in the columns. But all of this is outside the scope of the original question., and I suggest learning more about the grid. Also see https://stackoverflow.com/questions/29695531/bootstrap-row-and-col-explanation — Carol Skelly, Apr 07 '22 at 11:32

score 0 · Answer 2 · answered Apr 05 '22 at 08:10

Inspecting your JSFiddle, it looks like margin-top of the rows is the problem because it delivers a negative value:

margin-top: calc(-1 * var(--bs-gutter-y));

So you have to get rid of this wrongly calculated margin-top and all should work fine. You could e.g. add the m-auto class to your rows or fix the margin-top in your own CSS file.

 <div class="container grid overflow-hidden">
    <div class="row g-5 m-auto">
        <div class="col-md-2">
            Select:
        </div>
        <div class="col-md-4">
            <label class="form-check-label" for="mapped">
                <input id="mapped" class="form-check-input" type="checkbox" [(ngModel)]="mapped"
                       (change)="change(true)"/>
                Mapped</label>
        </div>
        <div class="col-md-5">
            <label class="form-check-label" for="unmapped">
                <input id="unmapped" class="form-check-input" type="checkbox" [(ngModel)]="unmapped"
                       (change)="change(true)"/>
                Unmapped</label>
        </div>
    </div>
    <div class="row g-5 m-auto">
        <div class="col-md-2">
            Show:
        </div>
        <div class="col-md-4">
            <label class="form-check-label" for="summary">
                <input id="summary" class="form-check-input" type="radio" [(ngModel)]="detail" [value]="false"
                       (change)="change(false)"/>
                Summary</label>
        </div>
        <div class="col-md-5">
            <label class="form-check-label" for="detail">
                <input id="detail" class="form-check-input" type="radio" [(ngModel)]="detail" [value]="true"
                       (change)="change(false)"/>
                Detail</label>
        </div>
    </div>
    <div class="row g-5 m-auto">
        <div class="col-md-2">
            Group:
        </div>
        <div class="col-md-10">
            <label class="form-check-label" for="detail">
                <input id="mapGrouped" class="form-check-input" type="checkbox" [(ngModel)]="mapGrouped"
                       [value]="true" (change)="change()"/>
                Mapped Status</label>
        </div>
    </div>
</div>

Not sure where this problem comes from. Is it maybe only in Fiddle? I never had problems with the BS grids. Alternatively you could define the grid-gap to get around the problem.

score -1 · Answer 3 · answered Apr 05 '22 at 04:11

You have to mention col inside row. Please have a look at the below solution.

Reference: https://getbootstrap.com/docs/5.0/layout/gutters/#vertical-gutters

<div class="container overflow-hidden">
    <div class="row gy-5">
        <div class="col-4">
            <div class="p-3">blah</div>
        </div>
        <div class="col-4">
            <div class="p-3">stuff</div>
        </div>
        <div class="col-4">
            <div class="p-3">rubbish</div>
        </div>
    </div>
</div>

If you look at the fiddle I posted, the things in the rows already have class=col-md-4. I tried changing them to col-4 and that didn't help. — xpusostomos, Apr 05 '22 at 06:41

How do I get Bootstrap grid gy-5 to work?

3 Answers3