Display Property Utilities in Bootstrap

Bootstrap provides utility classes to control the display property of elements. These classes allow you to easily change how elements are displayed (e.g., block, inline, none) and manage responsive visibility without writing custom CSS. Understanding these utilities can help you effectively manage layout and design in your Bootstrap-based projects.

1. Display Property Utilities

Bootstrap's display property utilities are classes that set the display CSS property. They include options for common display values such as none, block, inline, inline-block, flex, grid, and table.

a. Display Classes

• d-none: Hides an element by setting display: none.
• d-block: Displays an element as a block-level element with display: block.
• d-inline: Displays an element as an inline element with display: inline.
• d-inline-block: Displays an element as an inline-block element with display: inline-block.
• d-flex: Displays an element as a flex container with display: flex.
• d-inline-flex: Displays an element as an inline flex container with display: inline-flex.
• d-grid: Displays an element as a grid container with display: grid.
• d-inline-grid: Displays an element as an inline grid container with display: inline-grid.
• d-table: Displays an element as a table with display: table.
• d-inline-table: Displays an element as an inline table with display: inline-table.
• d-table-row: Displays an element as a table row with display: table-row.
• d-table-cell: Displays an element as a table cell with display: table-cell.

Example:

<div class="d-none">This element is hidden</div>
<div class="d-block">This element is displayed as block</div>
<div class="d-inline">This element is displayed as inline</div>
<div class="d-inline-block">This element is displayed as inline-block</div>
<div class="d-flex">This element is displayed as flex</div>

2. Responsive Display Classes

Bootstrap’s responsive display utilities allow you to apply display classes based on different screen sizes. These classes follow the format d-{breakpoint}-{value}, where {breakpoint} is optional and {value} is the display property.

a. Breakpoints

• sm: Small devices (≥576px)
• md: Medium devices (≥768px)
• lg: Large devices (≥992px)
• xl: Extra-large devices (≥1200px)
• xxl: Extra-extra-large devices (≥1400px, if available)

b. Examples

• d-sm-none: Hides the element on small screens and up.
• d-md-block: Displays the element as a block on medium screens and up.
• d-lg-inline: Displays the element as inline on large screens and up.
• d-xl-flex: Displays the element as flex on extra-large screens and up.

Example:

<div class="d-none d-md-block">This element is hidden on extra-small and small screens, and displayed as block on medium screens and up</div>
<div class="d-sm-inline d-md-flex">This element is displayed as inline on small screens and as flex on medium screens and up</div>

3. Utility Classes for Print

Bootstrap also provides display utilities for print media to manage visibility when printing:

• d-print-none: Hides an element when printing.
• d-print-block: Displays an element as a block when printing.
• d-print-inline: Displays an element as inline when printing.
• d-print-inline-block: Displays an element as inline-block when printing.

Example:

<div class="d-print-none">This element is hidden when printing</div>
<div class="d-print-block">This element is displayed as block when printing</div>

4. Custom Display Values

For more specific use cases, you might need custom display values. You can create custom CSS classes to achieve this:

Example:

CSS:

.custom-display {
  display: grid;
}

HTML:

<div class="custom-display">Custom display class</div>

Summary of Display Property Utilities in Bootstrap

• Basic Display Classes: Use d-none, d-block, d-inline, d-inline-block, d-flex, d-inline-flex, d-grid, etc., to set the display property.
• Responsive Display Classes: Apply display properties based on screen sizes using classes like d-sm-none, d-md-block, d-lg-inline, d-xl-flex.
• Print Utilities: Manage visibility for print media with classes like d-print-none, d-print-block.
• Custom Display: Create custom CSS classes for specific display values not covered by Bootstrap's utilities.