Add "is-vcentered" modifier

diff --git a/docs/documentation/columns/options.html b/docs/documentation/columns/options.html
index e97ebb125a636b48fe956f56a020a77141c0f69d..6695962ada3cf955cdd34cdc30af99c61b85f620 100644 (file)
--- 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">