Bootstrap Display Utilities: Controlling Element Rendering with Ease

Learn how to use Bootstrap's display utilities to quickly control the display behavior of HTML elements (block, inline, inline-block, none). This tutorial demonstrates how these classes simplify setting the `display` property, enhancing your workflow and enabling efficient layout management in your Bootstrap projects.

Bootstrap Display Utilities

Bootstrap provides a set of convenient utility classes to quickly control the display behavior of HTML elements. These classes offer a shorthand way to set the `display` property, making it easier to manage how elements are rendered.

.d-block

This utility sets the `display` property of an element to `block`. Block-level elements always start on a new line, take up the full width available, and have top and bottom margins.

.d-block {
  display: block;
}

.d-inline

This utility sets the `display` property to `inline`. Inline elements do not start on new lines and only take up as much width as necessary. They don't have top and bottom margins but do have left and right margins.

.d-inline {
  display: inline;
}

.d-inline-block

This utility sets the `display` property to `inline-block`. Inline-block elements behave like inline elements (they don't break to a new line), but they also allow you to set width and height properties explicitly.

.d-inline-block {
  display: inline-block;
}

Here's a simple example showing the difference between `inline-block` elements:

<span class="d-inline-block">Boot that strap!</span>
<span class="d-inline-block">Strap that boot!</span>