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

While working with Bootstrap v5.3.3, I encountered a potential inconsistency in the documentation regarding the usage of certain CSS classes.

In the Spacing Utilities documentation under the "Gap" section, the following example is provided:

<div class="grid gap-3">
  <div class="p-2 g-col-6">Grid item 1</div>
  <div class="p-2 g-col-6">Grid item 2</div>
  <div class="p-2 g-col-6">Grid item 3</div>
  <div class="p-2 g-col-6">Grid item 4</div>
</div>

Upon attempting to replicate this example in a project, I noticed that the classes grid and g-col-6 do not exist in the Bootstrap CSS provided via the CDN (https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css). Instead, these classes seem to be defined in the docs.css file used specifically for Bootstrap's documentation.

To illustrate this, I've created a CodePen example. In this example:

• Including only the Bootstrap CSS does not render the grid layout as shown in the documentation.
• Adding the docs.css file makes the grid layout work as intended.

Questions:

1. Are the grid and g-col-* classes part of Bootstrap's core CSS, or are they custom classes used exclusively in the documentation?
2. If these classes are not part of Bootstrap's core, would it be possible to clarify their usage in the documentation to prevent potential confusion for developers?

Understanding the distinction between documentation-specific styles and core Bootstrap styles is crucial for developers aiming to implement features accurately. Any clarification on this matter would be greatly appreciated.

Reduced test cases

CodePen: Bootstrap Grid Gap Example

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

Windows

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

Chrome

What version of Bootstrap are you using?

v5.3.3