From 076a950442371a8c0a974fa6478efb20a69527b7 Mon Sep 17 00:00:00 2001
From: Kovah <mail@kovah.de>
Date: Fri, 9 Sep 2016 06:48:17 +0200
Subject: Docs: Breaks out Utilities into separate section and optimizes its
 pages (#20678)

---
 docs/utilities/clearfix.md | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 docs/utilities/clearfix.md

(limited to 'docs/utilities/clearfix.md')

diff --git a/docs/utilities/clearfix.md b/docs/utilities/clearfix.md
new file mode 100644
index 000000000..8ebf214d2
--- /dev/null
+++ b/docs/utilities/clearfix.md
@@ -0,0 +1,39 @@
+---
+layout: docs
+title: Clearfix
+group: utilities
+---
+
+Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes [the micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/) as popularized by Nicolas Gallagher. Can also be used as a mixin.
+
+{% highlight html %}
+<div class="clearfix">...</div>
+{% endhighlight %}
+
+{% highlight scss %}
+// Mixin itself
+.clearfix() {
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }
+  &:after {
+    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.
+
+{% example html %}
+<div class="bg-info clearfix">
+  <button class="btn btn-secondary pull-xs-left">Example Button pulled left</button>
+  <button class="btn btn-secondary pull-xs-right">Example Button pullred right</button>
+</div>
+{% endexample %}
-- 
cgit v1.2.3


From 3dc4b3647ce2b27b0216fe8103253ffe9633fde9 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Mon, 26 Sep 2016 00:54:10 -0700
Subject: Rename pull-*-{left|right} classes to .float-*-left and
 .float-*-right

---
 docs/utilities/clearfix.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'docs/utilities/clearfix.md')

diff --git a/docs/utilities/clearfix.md b/docs/utilities/clearfix.md
index 8ebf214d2..e63ba3cda 100644
--- a/docs/utilities/clearfix.md
+++ b/docs/utilities/clearfix.md
@@ -33,7 +33,7 @@ The following example shows how the clearfix can be used. Without the clearfix t
 
 {% example html %}
 <div class="bg-info clearfix">
-  <button class="btn btn-secondary pull-xs-left">Example Button pulled left</button>
-  <button class="btn btn-secondary pull-xs-right">Example Button pullred right</button>
+  <button class="btn btn-secondary float-xs-left">Example Button pulled left</button>
+  <button class="btn btn-secondary float-xs-right">Example Button pullred right</button>
 </div>
 {% endexample %}
-- 
cgit v1.2.3