]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | --- |
2 | layout: docs | |
3 | title: Display property | |
4 | group: utilities | |
5 | --- | |
6 | ||
7 | 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). | |
8 | ||
9 | To make an element `display: none`, use our [responsive utilities]({{ site.baseurl }}/layout/responsive-utilities/) instead. | |
10 | ||
11 | {% example html %} | |
12 | <div class="d-inline bg-success">Inline</div> | |
13 | <div class="d-inline bg-success">Inline</div> | |
14 | {% endexample %} | |
15 | ||
16 | {% example html %} | |
17 | <span class="d-block bg-primary">Block</span> | |
18 | {% endexample %} | |
19 | ||
20 | {% example html %} | |
21 | <div class="d-inline-block bg-warning"> | |
22 | <h3>inline-block</h3> | |
23 | Boot that strap! | |
24 | </div> | |
25 | <div class="d-inline-block bg-warning"> | |
26 | <h3>inline-block</h3> | |
27 | Strap that boot! | |
28 | </div> | |
29 | {% endexample %} |