mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-05 16:42:29 +03:00
Code Activity

Add display utility classes (.d-{inline,block,inline-block}); fixes #19343

Browse Source 
Refs #19665
[skip sauce]
This commit is contained in:
Teo Dell'Amico
2016-04-02 14:11:18 -07:00
committed by Chris Rebert
parent 44c09cc07d
commit 1b35105852
3 changed files with 37 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/utilities.md
+22
View File
@@ -173,6 +173,28 @@ Easily make an element as wide as its parent using the `.w-100` utility class, w
<img class="w-100" data-src="holder.js/200px100?outline=yes&text=Width%20%3D%20100%25" alt="Width = 100%">
{% endexample %}
## CSS `display` (`block`, `inline`, `inline-block`)
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](../layout/responsive-utilities/) instead.
{% example html %}
<div class="d-inline bg-success">Inline</div>
<div class="d-inline bg-success">Inline</div>
<span class="d-block bg-primary">Block</span>
<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 %}
## Close icon
Use a generic close icon for dismissing content like modals and alerts. **Be sure to include text for screen readers**, as we've done with `aria-label`.