How to use grid-breakpoint class in Bootstrap ?

To get the grid-breakpoint value, we can use display property of bootstrap. Alter the value of display property with responsive display utility classes. Classes can be combined for different impacts as you need.

• .d-{value} for xs
• .d-{breakpoint}-{value} for xl, lg, md and sm.

Here value can be one of them like none, inline, inline-block, block, table, table-cell, table-row, flex, inline-flex.

The media queries impact screen widths with the given breakpoint or larger. Example, .d-md-none sets display: none; on md, lg and xl screens.

Grid-breakpoints are

•  xs: <576px Extra small gadgets (portrait phones, less than 576px).
•  sm: >=576px Small gadgets (landscape phones, 576px and up).
•  md: >=768px Medium gadgets (tablets, 768px and up).
•  lg: >=992px Large gadgets (desktops, 992px and up).
• xl: >=1200px Extra-large gadgets (large desktops, 1200px and up).

To cover up components use the .d-none class or one of the .d-{sm, md, lg, xl}-none classes for any responsive screen variety.

To show a component as it were on a given interval of screen sizes you will be able to combine one .d-*-none class with a .d-*-* class, for illustration .d-none .d-md-block .d-xl-none will cover up the component for all screen sizes except on medium and large gadgets.

Example 1:

Output:

Example 2:

Output: