Bootstrap - Display

Ethan D. - June 1, 2024

Display Utility Classes

Bootstrap offers display utility classes that let you control the display behavior of elements on your web page. These classes provide a way to set the display property of an element without writing custom CSS.

Display Values

Bootstrap provides the following display values as utility classes:

Class	Description
`d-none`	Hides the element completely.
`d-inline`	Displays the element as an inline element, without any line breaks before or after it.
`d-inline-block`	Displays the element as an inline-block element, allowing you to set width and height properties.
`d-block`	Displays the element as a block-level element, taking up the full width of its parent container.
`d-table`	Displays the element as a table-level element, similar to the `<table>` tag.
`d-table-cell`	Displays the element as a table cell, similar to the `<td>` tag.
`d-table-row`	Displays the element as a table row, similar to the `<tr>` tag.
`d-flex`	Displays the element as a flex container, enabling flexbox layout for its child elements.
`d-inline-flex`	Displays the element as an inline flex container, allowing it to be used within text and other inline elements.

These display utility classes can be added to any element to change its display property.

Tip: Using Display Utility Classes

To apply a display utility class, simply add the class name to the element's class attribute in your HTML code:

<div class="d-inline-block">This element will be displayed as an inline-block.</div>

Display Utilities for Different Screen Sizes

Bootstrap provides responsive display utility classes that let you control the display behavior of elements based on the screen size. These classes follow the naming convention d-{breakpoint}-{value}, where {breakpoint} is the screen size and {value} is the display value.

The available display utility classes for different screen sizes are:

Extra Small (xs): Applies to screens less than 576px wide

Classes: d-none, d-inline, d-inline-block, d-block, d-table, d-table-cell, d-table-row, d-flex, d-inline-flex

Small (sm): Applies to screens 576px and up

Classes: d-sm-none, d-sm-inline, d-sm-inline-block, d-sm-block, d-sm-table, d-sm-table-cell, d-sm-table-row, d-sm-flex, d-sm-inline-flex

Medium (md): Applies to screens 768px and up

Classes: d-md-none, d-md-inline, d-md-inline-block, d-md-block, d-md-table, d-md-table-cell, d-md-table-row, d-md-flex, d-md-inline-flex

Large (lg): Applies to screens 992px and up

Classes: d-lg-none, d-lg-inline, d-lg-inline-block, d-lg-block, d-lg-table, d-lg-table-cell, d-lg-table-row, d-lg-flex, d-lg-inline-flex

Extra Large (xl): Applies to screens 1200px and up

Classes: d-xl-none, d-xl-inline, d-xl-inline-block, d-xl-block, d-xl-table, d-xl-table-cell, d-xl-table-row, d-xl-flex, d-xl-inline-flex

By using these responsive display utility classes, you can create layouts that adapt to different screen sizes, showing or hiding elements as needed.

Example: Responsive Display Utility Classes

<div class="d-block d-sm-none">This element will be displayed as a block on extra small screens and hidden on larger screens.</div>
<div class="d-none d-sm-block">This element will be hidden on extra small screens and displayed as a block on larger screens.</div>

Hiding Elements

Bootstrap's d-none class is a utility class that lets you hide elements on your web page. When you add the d-none class to an element, it will be hidden from view and will not take up space in the layout.

Example: Hiding an element

<div class="d-none">This element will be hidden.</div>

Bootstrap also has responsive utility classes that let you hide elements based on the screen size. These classes use the naming convention d-{breakpoint}-none, where {breakpoint} is the screen size at which the element should be hidden.

Responsive Utility Class	Description
`d-none`	Hides the element on all screen sizes.
`d-sm-none`	Hides the element on screens 576px and up (small and above).
`d-md-none`	Hides the element on screens 768px and up (medium and above).
`d-lg-none`	Hides the element on screens 992px and up (large and above).
`d-xl-none`	Hides the element on screens 1200px and up (extra large and above).

Using these responsive utility classes, you can hide elements based on the screen size. This is useful when you want to create responsive layouts that work on different devices.

Example: Hiding elements based on screen size

<div class="d-none d-md-block">This element will be hidden on screens smaller than medium and shown on medium screens and above.</div>
<div class="d-block d-lg-none">This element will be shown on screens smaller than large and hidden on large screens and above.</div>

Tip: Hiding an element while keeping its space

When you hide an element with d-none, it will not take up space in the layout. If you want to hide an element while keeping its space, you can use the visibility property, such as visibility: hidden;.

With Bootstrap's d-none class and responsive utility classes, you can control the visibility of elements on your web page and create dynamic and responsive layouts.

Flexbox Options

Bootstrap's d-flex class is a utility class that lets you create flexbox layouts. When you add the d-flex class to an element, it becomes a flex container, and its child elements become flex items. This gives you control over the layout and alignment of the child elements using flexbox properties.

To create a flex container, add the d-flex class to an element:

Example: Flex Container

<div class="d-flex">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

By default, the flex items are arranged in a row. You can change the direction of the flex items by using the flex-row or flex-column classes:

Example: Flex Direction

<div class="d-flex flex-row">
  <!-- Flex items arranged in a row (default) -->
</div>

<div class="d-flex flex-column">
  <!-- Flex items arranged in a column -->
</div>

Bootstrap also provides utility classes for aligning flex items within the flex container. You can use the justify-content classes to align items along the main axis (horizontally for flex-row and vertically for flex-column):

Example: Justify Content

<div class="d-flex justify-content-start">
  <!-- Flex items aligned to the start of the main axis -->
</div>

<div class="d-flex justify-content-center">
  <!-- Flex items centered along the main axis -->
</div>

<div class="d-flex justify-content-end">
  <!-- Flex items aligned to the end of the main axis -->
</div>

<div class="d-flex justify-content-between">
  <!-- Flex items evenly distributed along the main axis -->
</div>

<div class="d-flex justify-content-around">
  <!-- Flex items evenly distributed with equal space around them -->
</div>

To align flex items along the cross axis (vertically for flex-row and horizontally for flex-column), you can use the align-items classes:

Example: Align Items

<div class="d-flex align-items-start">
  <!-- Flex items aligned to the start of the cross axis -->
</div>

<div class="d-flex align-items-center">
  <!-- Flex items centered along the cross axis -->
</div>

<div class="d-flex align-items-end">
  <!-- Flex items aligned to the end of the cross axis -->
</div>

<div class="d-flex align-items-stretch">
  <!-- Flex items stretched to fill the container along the cross axis -->
</div>

By combining the d-flex class with the flex-row, flex-column, justify-content, and align-items classes, you can create flexible and responsive layouts that adapt to different screen sizes and content requirements.

Flexbox Example

<div class="d-flex flex-column align-items-center">
  <h2>Centered Heading</h2>
  <p>This paragraph is centered both horizontally and vertically within the flex container.</p>
  <button>Centered Button</button>
</div>

Using Bootstrap's flexbox utility classes, you can create complex layouts without writing custom CSS. These classes provide a quick and efficient way to control the layout and alignment of elements on your web page.

Responsive Display Classes

Bootstrap's responsive display classes let you combine display utility classes with responsive breakpoints to create layouts that adapt to different screen sizes. By using these classes, you can show, hide, or change the display behavior of elements based on the viewport width.

To create a responsive display class, you combine the display utility class with a responsive breakpoint using the format d-{breakpoint}-{value}, where {breakpoint} is the screen size and {value} is the display value.

Responsive Display Class Examples

<div class="d-none d-md-block">
  <!-- Hidden on screens smaller than medium, displayed as block on medium and above -->
</div>

<div class="d-flex d-lg-none">
  <!-- Displayed as flex on screens smaller than large, hidden on large and above -->
</div>

<div class="d-inline d-sm-block d-lg-inline">
  <!-- Displayed as inline on extra small and large screens, displayed as block on small and medium screens -->
</div>

By combining display utility classes with responsive breakpoints, you can create responsive layouts that adapt to different screen sizes. This lets you optimize the layout and content of your web page for different devices and viewport widths.

Responsive Layout Example

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 d-flex d-md-block">
      <!-- Full width and flex on extra small screens, half width and block on medium and above -->
      <div class="card">
        <img src="image1.jpg" class="card-img-top" alt="Image 1">
        <div class="card-body">
          <h5 class="card-title">Card 1</h5>
          <p class="card-text">Card content goes here.</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-6 d-none d-md-block">
      <!-- Hidden on extra small screens, half width and block on medium and above -->
      <div class="card">
        <img src="image2.jpg" class="card-img-top" alt="Image 2">
        <div class="card-body">
          <h5 class="card-title">Card 2</h5>
          <p class="card-text">Card content goes here.</p>
        </div>
      </div>
    </div>
  </div>
</div>

The first card is displayed full width and as a flex item on extra small screens, and half width and as a block on medium screens and above. The second card is hidden on extra small screens and displayed as half width and block on medium screens and above.