diff options
| author | XhmikosR <[email protected]> | 2021-01-19 18:16:38 +0200 |
|---|---|---|
| committer | GitHub <[email protected]> | 2021-01-19 18:16:38 +0200 |
| commit | 6ffb0b48e455430f8a5359ed689ad64c1143fac2 (patch) | |
| tree | 6262338881c32c3c19e4977152ecd0fca61a341c /site/content/docs/4.6/utilities/clearfix.md | |
| parent | 9d87bd7a30c1874a9c3d60041a4042228753dd0e (diff) | |
| download | bootstrap-4.6.0.tar.xz bootstrap-4.6.0.zip | |
Release v4.6.0. (#32726)v4.6.0
* Bump version to v4.6.0.
* Dist
Diffstat (limited to 'site/content/docs/4.6/utilities/clearfix.md')
| -rw-r--r-- | site/content/docs/4.6/utilities/clearfix.md | 37 |
1 files changed, 37 insertions, 0 deletions
diff --git a/site/content/docs/4.6/utilities/clearfix.md b/site/content/docs/4.6/utilities/clearfix.md new file mode 100644 index 000000000..c2f129a71 --- /dev/null +++ b/site/content/docs/4.6/utilities/clearfix.md @@ -0,0 +1,37 @@ +--- +layout: docs +title: Clearfix +description: Quickly and easily clear floated content within a container by adding a clearfix utility. +group: utilities +--- + +Easily clear `float`s by adding `.clearfix` **to the parent element**. Can also be used as a mixin. + +```html +<div class="clearfix">...</div> +``` + +```scss +// Mixin itself +@mixin clearfix() { + &::after { + display: block; + content: ""; + clear: both; + } +} + +// Usage as a mixin +.element { + @include clearfix; +} +``` + +The following example shows how the clearfix can be used. Without the clearfix the wrapping div would not span around the buttons which would cause a broken layout. + +{{< example >}} +<div class="bg-info clearfix"> + <button type="button" class="btn btn-secondary float-left">Example Button floated left</button> + <button type="button" class="btn btn-secondary float-right">Example Button floated right</button> +</div> +{{< /example >}} |
