FM / utilities

/usr/share/doc/libjs-bootstrap4/utilities/

/usr/share/doc/libjs-bootstrap4/utilities

Name	Size	Mode	Actions
borders.md	2463	0644	edit dl rm
clearfix.md	916	0644	edit dl rm
close-icon.md	365	0644	edit dl rm
colors.md	2741	0644	edit dl rm
display.md	3971	0644	edit dl rm
embed.md	1916	0644	edit dl rm
flex.md.gz	2852	0644	edit dl rm
float.md	1706	0644	edit dl rm
image-replacement.md	968	0644	edit dl rm
interactions.md	814	0644	edit dl rm
overflow.md	1006	0644	edit dl rm
position.md	1415	0644	edit dl rm
screen-readers.md	596	0644	edit dl rm
shadows.md	740	0644	edit dl rm
sizing.md	2179	0644	edit dl rm
spacing.md	4043	0644	edit dl rm
stretched-link.md.gz	1496	0644	edit dl rm
text.md.gz	1537	0644	edit dl rm
vertical-align.md	1279	0644	edit dl rm
visibility.md	914	0644	edit dl rm

Edit: /usr/share/doc/libjs-bootstrap4/utilities/float.md (1706B)

---
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 effect on flex items.

## Classes

Toggle a float with a class:

{{< 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>
{{< /example >}}

## Mixins

Or by Sass mixin:

```scss
.element {
  @include float-left;
}
.another-element {
  @include float-right;
}
.one-more {
  @include float-none;
}
```

## Responsive

Responsive variations also exist for each `float` value.

{{< 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>
{{< /example >}}

Here are all the support classes;

{{< markdown >}}
{{< float.inline >}}
{{- range $.Site.Data.breakpoints }}
- `.float{{ .abbr }}-left`
- `.float{{ .abbr }}-right`
- `.float{{ .abbr }}-none`
{{- end -}}
{{< /float.inline >}}
{{< /markdown >}}

--- 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 effect on flex items. ## Classes Toggle a float with a class: {{< example >}}

Float left on all viewport sizes

Float right on all viewport sizes

Don't float on all viewport sizes

{{< /example >}} ## Mixins Or by Sass mixin: ```scss .element { @include float-left; } .another-element { @include float-right; } .one-more { @include float-none; } ``` ## Responsive Responsive variations also exist for each `float` value. {{< example >}}

Float left on viewports sized SM (small) or wider

Float left on viewports sized MD (medium) or wider

Float left on viewports sized LG (large) or wider

Float left on viewports sized XL (extra-large) or wider

{{< /example >}} Here are all the support classes; {{< markdown >}} {{< float.inline >}} {{- range $.Site.Data.breakpoints }} - `.float{{ .abbr }}-left` - `.float{{ .abbr }}-right` - `.float{{ .abbr }}-none` {{- end -}} {{< /float.inline >}} {{< /markdown >}}