diff options
| author | Teo Dell'Amico <[email protected]> | 2016-04-02 14:11:18 -0700 |
|---|---|---|
| committer | Chris Rebert <[email protected]> | 2016-04-06 15:49:08 -0700 |
| commit | 1b3510585214824d16adac234895756ebe960e9e (patch) | |
| tree | e74acb74310cf9fe4233ecba65cb929e9962af31 | |
| parent | 44c09cc07df131a6f5e2a8de18e94ad44a01ed34 (diff) | |
| download | bootstrap-1b3510585214824d16adac234895756ebe960e9e.tar.xz bootstrap-1b3510585214824d16adac234895756ebe960e9e.zip | |
Add `display` utility classes (.d-{inline,block,inline-block}); fixes #19343
Refs #19665
[skip sauce]
| -rw-r--r-- | docs/components/utilities.md | 22 | ||||
| -rw-r--r-- | scss/_utilities.scss | 3 | ||||
| -rw-r--r-- | scss/utilities/_display.scss | 13 |
3 files changed, 37 insertions, 1 deletions
diff --git a/docs/components/utilities.md b/docs/components/utilities.md index 829ee4907..350345cff 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -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`. diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 3f9e81f12..87b8ba6da 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -1,8 +1,9 @@ @import "utilities/background"; @import "utilities/clearfix"; +@import "utilities/display"; +@import "utilities/flex"; @import "utilities/pulls"; @import "utilities/screenreaders"; @import "utilities/spacing"; @import "utilities/text"; @import "utilities/visibility"; -@import "utilities/flex"; diff --git a/scss/utilities/_display.scss b/scss/utilities/_display.scss new file mode 100644 index 000000000..d74049be8 --- /dev/null +++ b/scss/utilities/_display.scss @@ -0,0 +1,13 @@ +// +// Display utilities +// + +.d-block { + display: block !important; +} +.d-inline-block { + display: inline-block !important; +} +.d-inline { + display: inline !important; +} |