What is .d-grid class in Bootstrap-CodePudding

I am working with block buttons with bootstrap v5.1 and I used d-grid to make my buttons responsive.

    <div >
  <button  type="button">Button</button>
</div>

I wanted to know what d-grid here does, as i could not find any documentation regarding this.

CodePudding user response：

The d- part of the class is part of the display utility class. This generally changes the value of the CSS display property: https://getbootstrap.com/docs/4.0/utilities/display/

In your example, the d-grid class is making the div element become a grid container which is part of the CSS Grid Layout. See here: https://www.w3schools.com/css/css_grid.asp

It looks like the "grid" value is not supported by Bootstrap 5 and it is an old legacy value for CSS. That should be changed to one of the following values:

none inline inline-block block table table-cell table-row flex inline-flex

CodePudding user response：

"D-" is kind of utilities for Bootstrap that effect on Display directly and help you to have Grid Layout. In Css we call that "Display".

How it works :


.d-{value}

example :


CSS: display: inline-flex;
Bootstrap: d-inline-flex

All of values

*none

inline

inline-block

block

table

table-cell

table-row

flex

inline-flex*

ABOUT GRID :

CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

Like tables, grid layout enables an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements. sources for more information :

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

https://getbootstrap.com/docs/4.0/utilities/display/

https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_display_grid