display-property.md

---
layout: docs
title: Display property
group: utilities
---

Use `.d-block`, `.d-inline`, or `.d-inline-block` to simply set an element's [`display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) to `block`, `inline`, or `inline-block` (respectively).

To make an element `display: none`, use our [responsive utilities]({{ site.baseurl }}/layout/responsive-utilities/) instead.

{% example html %}
<div class="d-inline bg-success">Inline</div>
<div class="d-inline bg-success">Inline</div>
{% endexample %}

{% example html %}
<span class="d-block bg-primary">Block</span>
{% endexample %}

{% example html %}
<div class="d-inline-block bg-warning">
  <h3>inline-block</h3>
  Boot that strap!
</div>
<div class="d-inline-block bg-warning">
  <h3>inline-block</h3>
  Strap that boot!
</div>
{% endexample %}