diff options
| author | Mark Otto <[email protected]> | 2018-12-16 18:18:37 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2018-12-21 09:03:29 -0800 |
| commit | eda851ee76bd01375f39682d903a76cc51207475 (patch) | |
| tree | c0089a8d35153a7f7af991c5070af6449c7880ab /site/docs/4.2/utilities/float.md | |
| parent | 2c0cd7d2edb41d6288c1eb4da18b614b04c4b912 (diff) | |
| download | bootstrap-eda851ee76bd01375f39682d903a76cc51207475.tar.xz bootstrap-eda851ee76bd01375f39682d903a76cc51207475.zip | |
Prep for v4.2.0 release
- Move 4.1 docs to 4.2
- Update versions everywhere to 4.1.3 with release script
- Manually bump the shorthand version in package.json
- Add 4.2 to the versions docs page
- Update some redirects
- Fix tests asset URLs
- Bump Nuget and more
Diffstat (limited to 'site/docs/4.2/utilities/float.md')
| -rw-r--r-- | site/docs/4.2/utilities/float.md | 57 |
1 files changed, 57 insertions, 0 deletions
diff --git a/site/docs/4.2/utilities/float.md b/site/docs/4.2/utilities/float.md new file mode 100644 index 000000000..ec05d3ec7 --- /dev/null +++ b/site/docs/4.2/utilities/float.md @@ -0,0 +1,57 @@ +--- +layout: docs +title: Float +description: Toggle floats on any element, across any breakpoint, using our responsive float utilities. +group: utilities +toc: true +--- + +## Overview + +These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport breakpoints as our grid system. Please be aware float utilities have no affect on flex items. + +## Classes + +Toggle a float with a class: + +{% capture example %} +<div class="float-left">Float left on all viewport sizes</div><br> +<div class="float-right">Float right on all viewport sizes</div><br> +<div class="float-none">Don't float on all viewport sizes</div> +{% endcapture %} +{% include example.html content=example %} + +## Mixins + +Or by Sass mixin: + +{% highlight scss %} +.element { + @include float-left; +} +.another-element { + @include float-right; +} +.one-more { + @include float-none; +} +{% endhighlight %} + +## Responsive + +Responsive variations also exist for each `float` value. + +{% capture example %} +<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br> +<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br> +<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br> +<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br> +{% endcapture %} +{% include example.html content=example %} + +Here are all the support classes; + +{% for bp in site.data.breakpoints %} +- `.float{{ bp.abbr }}-left` +- `.float{{ bp.abbr }}-right` +- `.float{{ bp.abbr }}-none`{% endfor %} |
