From: Tom Hartley <tom@tomhrtly.com>
Date: Wed, 12 Dec 2018 22:37:30 +0000 (+0000)
Subject: Add "is-vcentered" modifier
X-Git-Tag: 0.7.3~12
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=8b60a4939379531b0a951e85142dbf12eba906dc;p=thirdparty%2Fbulma.git

Add "is-vcentered" modifier
---

diff --git a/docs/documentation/columns/options.html b/docs/documentation/columns/options.html
index e97ebb125..6695962ad 100644
--- a/docs/documentation/columns/options.html
+++ b/docs/documentation/columns/options.html
@@ -10,6 +10,17 @@ breadcrumb:
 - columns-options
 ---
 
+{% capture columns_vcentered %}
+<div class="columns is-vcentered">
+  <div class="column is-8">
+    <p class="bd-notification is-primary">First column</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-primary">Second column with more content. This is so you can see the vertical alignment.</p>
+  </div>
+</div>
+{% endcapture %}
+
 {% capture columns_multiline %}
 <div class="columns is-multiline is-mobile">
   <div class="column is-one-quarter">
@@ -87,6 +98,23 @@ breadcrumb:
 </div>
 {% endcapture %}
 
+{% include elements/anchor.html name="Vertical alignment" %}
+
+<div class="content">
+  <p>To align your columns vertically, add the <code>is-vcentered</code> modifier to the <code>columns</code> container.</p>
+</div>
+
+<div class="columns is-vcentered">
+  <div class="column is-8">
+    <p class="bd-notification is-primary">First column</p>
+  </div>
+  <div class="column">
+    <p class="bd-notification is-primary">Second column with more content. This is so you can see the vertical alignment.</p>
+  </div>
+</div>
+
+{% highlight html %}{{ columns_vcentered }}{% endhighlight %}
+
 {% include elements/anchor.html name="Multiline" %}
 
 <div class="content">