Missing 'grid' and 'g-col-*' Classes

[okadriu]

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

[noctivityinc]

I think you updated the CDN but the npm package is still missing these classes

[gazhay]

Coming here from this

This is indeed the issue I was facing, the 5.3.2 version I was using was locally hosted and does not have ".grid".

[louismaximepiton]

Hey there, thanks for your contribution to the project.

The grid part is disabled by default for now as explained in CSS Grid. It means that the classes aren't embedded in the CDN packages right now. You can still enable it easily using npm by setting $enable-cssgrid: true; and then @import "~/bootstrap"; in your Scss file.
In our documentation build, we do this small trick (and this is why it seems to come from the documentation) in our docs.scss file:

`$enable-cssgrid: true;
// fusv-enable
@import "../../../scss/grid";

So now time to your 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?

They are part of it but need to be enabled first via Sass option.

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?

Feel free to open a PR changing the documentation to discuss about it. However, the example you pointed out seems to explain the usage of gap rather than a display issue. Would a link to CSS Grid page be enough ?

[gazhay]

Whilst I understand the above and appreciate it is your choice to make, just as a point of discussion, my workflow was :-

1. Download the repo
2. Use the files from the dist/ directory in my project

The result was that the examples did not work because of missing classes in the dist files.

I understand your post, but doesn't that then prohibit the use of the project in the way I've described?

Shouldn't the dist/ folder just be removed from the repo and installation instructions amended to suggest that it is not a method available to end-users anymore?

I'm not trying to be argumentative, just trying to reduce confusion and support requests.

[louismaximepiton]

You're right on your workflow and the way to use the project. I think the main problem here is that we use something opt-in in a page that does mention it but very far away and not in the context. The thing was done a long time ago so I don't have the historic for this.

I don't think we'd remove our dist files because they are the ones used in the CDNs, and used by many people.

From my pov, the best of the 2 worlds would be change the example in order to use flexboxes rather than a custom opt-in .grid class. So the .grid class will be contained inside a single page in the documentation which mentions correctly the opt-in thing. I'll keep you in touch with it.

[phazei]

A couple months ago I really wanted to use or at least test out the .grid system easily. I went looking for examples in any codesandbox/codepen/stackblitz but couldn't because the css wasn't there. I think the .grid should be there so it's easy to even see it in action at all since that's how many people will look at something initially instead of having to setup a project just to test that out. After not anything on it at all, I just gave up on it. But it seems like it could be useful. It's also difficult to even google for specifically because the normal flex box rows and columns are referred to as the bootstrap css grid everywhere.

[phazei]

Well, that was a really disappointing fix. Why not just compile it with $enable-cssgrid: true? Without it it's not possible for anyone to sample or easily test it so it's less likely to even catch on. There should definitely be options to display grids, and if you just remove it, it's never going to get utilized.

[julien-deramond]

The documentation is already compiled with $enable-cssgrid: true, otherwise the dedicated CSS Grid page wouldn't be rendered correctly.

We decided to remove the .grid usage specifically from Utilities > Spacing because the spacing utilities don't require $enable-cssgrid: true or .grid to function. Including it there was potentially confusing, and we felt it would be clearer to centralize everything that requires enabling a specific option on one page.

However, if you have ideas for a more effective way to organize this information, we’d love to hear them. Feel free to open a new PR with your suggestions! @phazei