From: kennedybaird <kennedybaird@gmail.com>
Date: Mon, 31 Jul 2017 18:20:19 +0000 (+0700)
Subject: include example for .is-centered (#978)
X-Git-Tag: 0.5.1~27
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=915d0b4a15b9549941dbfd3e5f2233c42642ef2b;p=thirdparty%2Fbulma.git

include example for .is-centered (#978)

and for .is-multiline and .is-centered
---

diff --git a/docs/documentation/grid/columns.html b/docs/documentation/grid/columns.html
index 8a5083618..460586e30 100644
--- a/docs/documentation/grid/columns.html
+++ b/docs/documentation/grid/columns.html
@@ -494,6 +494,103 @@ doc-subtab: columns
 </div>
 {% endhighlight %}
 
+    <h3 class="title">Centering columns</h3>
+    <div class="content">
+      <p>While you can use <em>empty columns</em> (like <code>&lt;div class="column"&gt;&lt;/div&gt;</code>) to create horizontal space around <code>.column</code> elements, you can also use <code>.is-centered</code> on the parent <code>.columns</code> element:
+    </div>
+
+    <div class="columns is-mobile is-centered">
+      <div class="column is-half is-narrow">
+        <p class="notification is-info">
+          <code class="html">is-half</code><br>
+          <code class="html">is-narrow</code>
+        </p>
+      </div>
+    </div>
+
+{% highlight html %}
+    <div class="columns is-mobile is-centered">
+      <div class="column is-half is-narrow">
+        <p class="notification is-info">
+          <code class="html">is-half</code><br>
+          <code class="html">is-narrow</code>
+        </p>
+      </div>
+    </div>
+{% endhighlight %}
+    
+    <div class="content">
+      <p>Use with <code>.is-multiline</code> to create a flexible, centered list (try resizing to see centering in different viewport sizes):
+    </div>
+
+    <div class="columns is-mobile is-multiline is-centered">
+      <div class="column is-narrow">
+        <p class="notification is-info">
+          <code class="html">is-narrow</code><br>
+          First Column
+        </p>
+      </div>
+      <div class="column is-narrow">
+        <p class="notification is-success">
+          <code class="html">is-narrow</code><br>
+          Our Second Column
+        </p>
+      </div>
+      <div class="column is-narrow">
+        <p class="notification is-danger">
+          <code class="html">is-narrow</code><br>
+          Third Column
+        </p>
+      </div>
+      <div class="column is-narrow">
+        <p class="notification is-info">
+          <code class="html">is-narrow</code><br>
+          The Fourth Column
+        </p>
+      </div>
+      <div class="column is-narrow">
+        <p class="notification is-success">
+          <code class="html">is-narrow</code><br>
+          Fifth Column
+        </p>
+      </div>
+    </div>
+
+
+{% highlight html %}
+    <div class="columns is-mobile is-multiline is-centered">
+      <div class="column is-narrow">
+        <p class="notification is-info">
+          <code class="html">is-narrow</code><br>
+          First Column
+        </p>
+      </div>
+      <div class="column is-narrow">
+        <p class="notification is-success">
+          <code class="html">is-narrow</code><br>
+          Our Second Column
+        </p>
+      </div>
+      <div class="column is-narrow">
+        <p class="notification is-danger">
+          <code class="html">is-narrow</code><br>
+          Third Column
+        </p>
+      </div>
+      <div class="column is-narrow">
+        <p class="notification is-info">
+          <code class="html">is-narrow</code><br>
+          The Fourth Column
+        </p>
+      </div>
+      <div class="column is-narrow">
+        <p class="notification is-success">
+          <code class="html">is-narrow</code><br>
+          Fifth Column
+        </p>
+      </div>
+    </div>
+{% endhighlight %}
     <hr>
 
     <h3 class="title">Responsiveness</h3>