diff options
| author | Mark Otto <[email protected]> | 2017-08-07 22:36:57 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-08-10 22:35:38 -0700 |
| commit | 3fbdedbf22dc9257e06d73b13f6db7244dbda7cb (patch) | |
| tree | 8fb94fa14f81a5742611b1a42b55717d602f6f13 | |
| parent | 35f80bb12e4e71fd777ee60ffa43711d8f84b1a6 (diff) | |
| download | bootstrap-3fbdedbf22dc9257e06d73b13f6db7244dbda7cb.tar.xz bootstrap-3fbdedbf22dc9257e06d73b13f6db7244dbda7cb.zip | |
Add basic property-value utils for position
| -rw-r--r-- | docs/4.0/utilities/position.md | 12 | ||||
| -rw-r--r-- | scss/utilities/_position.scss | 11 |
2 files changed, 22 insertions, 1 deletions
diff --git a/docs/4.0/utilities/position.md b/docs/4.0/utilities/position.md index fb7d8bd9e..9cf952452 100644 --- a/docs/4.0/utilities/position.md +++ b/docs/4.0/utilities/position.md @@ -6,6 +6,18 @@ group: utilities toc: true --- +## Common values + +Quick positioning classes are available, though they are not responsive. + +{% highlight html %} +<div class="position-static">...</div> +<div class="position-relative">...</div> +<div class="position-absolute">...</div> +<div class="position-fixed">...</div> +<div class="position-sticky">...</div> +{% endhighlight %} + ## Fixed top Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add aditional CSS. diff --git a/scss/utilities/_position.scss b/scss/utilities/_position.scss index 74b8d39e7..bddae2151 100644 --- a/scss/utilities/_position.scss +++ b/scss/utilities/_position.scss @@ -1,4 +1,13 @@ -// Positioning +// Common values + +// Sass list not in variables since it's not intended for customization. +$positions: static, relative, absolute, fixed, sticky; + +@each $position in $positions { + .position-#{$position} { position: $position !important; } +} + +// Shorthand .fixed-top { position: fixed; |
