diff options
author | Mark Otto <markd.otto@gmail.com> | 2018-04-09 19:00:23 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-04-09 19:00:23 +0300 |
commit | 8f7bd419935adfcd53c471a0202083464800619e (patch) | |
tree | d0e6ab018a0f41b59a1206cf72ffc79a474e69b9 /docs/4.1/utilities/clearfix.md | |
parent | 91730a644f107ca80a747a6f7f0c173eca5708fa (diff) |
Ship v4.1.0 (#26218)v4.1.0
* update docs path from docs/4.0/ to docs/4.1/
* bump version to 4.1.0
* Update redirects to work for 4.1 docs move
* Update docs version switcher to include latest and link to 4.0 docs
* re-run dist
* Update package-lock.json
* Update docs-navbar.html
Diffstat (limited to 'docs/4.1/utilities/clearfix.md')
-rw-r--r-- | docs/4.1/utilities/clearfix.md | 39 |
1 files changed, 39 insertions, 0 deletions
diff --git a/docs/4.1/utilities/clearfix.md b/docs/4.1/utilities/clearfix.md new file mode 100644 index 0000000000..f4cb084bf8 --- /dev/null +++ b/docs/4.1/utilities/clearfix.md @@ -0,0 +1,39 @@ +--- +layout: docs +title: Clearfix +description: Quickly and easily clear floated content within a container by adding a clearfix utility. +group: utilities +toc: true +--- + +Easily clear `float`s by adding `.clearfix` **to the parent element**. Can also be used as a mixin. + +{% highlight html %} +<div class="clearfix">...</div> +{% endhighlight %} + +{% highlight scss %} +// Mixin itself +@mixin clearfix() { + &::after { + display: block; + content: ""; + clear: both; + } +} + +// Usage as a mixin +.element { + @include clearfix; +} +{% endhighlight %} + +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. + +{% capture 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> +{% endcapture %} +{% include example.html content=example %} |