Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Issues
  • #36995
Closed
Open
Issue created Aug 21, 2022 by Administrator@rootContributor3 of 3 checklist items completed3/3 checklist items

Vertical gutters implementation documentation unintuitive

Created by: thatstatsguy

Prerequisites

  • I have searched for duplicate or closed issues
  • I have validated any HTML to avoid common problems
  • I have read the contributing guidelines

Describe the issue

Hi all

I've been playing around with the vertical gutters example found on the GetBootstrap website.

What I don't fully understand when using this feature is why gutters don't apply between rows i.e. why does the following code not produce additional spacing between rows?

<div class="container overflow-hidden">
    <div class="row g-5">
        <div class="col-6">
            <div class="p-3 border bg-light">Custom column padding 1</div>
        </div>
        <div class="col-6">
            <div class="p-3 border bg-light">Custom column padding 2</div>
        </div>
    
    </div>
    <div class="row g-5">
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column padding3</div>
        </div>
        <div class="col-6">
          <div class="p-3 border bg-light">Custom column padding4</div>
        </div>
    
    </div>
</div>

Looking at the original code it seems like this feature is only intended for columns within a single row i.e.

<div class="container overflow-hidden text-center">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

I'm able to place spacing between rows using something like py-4, but at first glance, it's not super intuitive.

Reduced test cases

See above

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Firefox

What version of Bootstrap are you using?

5.2

Assignee
Assign to
Time tracking