Responsive Display in Bootstrap

Responsive display utilities in Bootstrap enable you to control the visibility and layout of elements across different screen sizes. This ensures that your website adapts effectively to various devices, providing an optimal user experience. These utilities help you show or hide elements based on screen width and change their display properties as needed.

1. Display Property Utilities

Bootstrap provides a set of utility classes to control the display property of elements. The basic display classes are:

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

Example:

<div class="d-none">Hidden element</div>
<div class="d-block">Block-level element</div>
<div class="d-inline">Inline element</div>
<div class="d-inline-block">Inline-block element</div>
<div class="d-flex">Flex container</div>

2. Responsive Display Classes

Responsive display classes allow you to apply different display settings based on the viewport size. These classes follow the format d-{breakpoint}-{value}, where {breakpoint} indicates the screen size and {value} specifies the display property.

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)

Examples

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

Example:

<div class="d-none d-md-block">Visible on medium screens and up as block</div>
<div class="d-sm-inline d-md-flex">Inline on small screens, flex on medium screens and up</div>

3. Utility Classes for Print

Bootstrap also offers display utilities for print media, which help you control visibility when printing:

• d-print-none: Hides an element when printing.
• d-print-block: Displays an element as 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

If Bootstrap’s predefined display values don’t meet your needs, you can use custom CSS to define specific display properties:

Example:

CSS:

.custom-display {
  display: grid;
}

HTML:

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

Summary of Responsive Display in Bootstrap

• Basic Display Classes: Use classes like d-none, d-block, d-inline, d-flex, etc., to set the display property of elements.
• Responsive Display Classes: Apply display settings based on screen size using classes like d-sm-none, d-md-block, d-lg-inline, d-xl-flex.
• Print Utilities: Control visibility for print media with classes like d-print-none, d-print-block.
• Custom Display: Define specific display properties with custom CSS classes if needed.