From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Sun, 7 Jun 2020 12:23:16 +0000 (+0100)
Subject: Add spacing helpers examples
X-Git-Tag: 0.9.0~1^2~2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=0430053231bd4a59e7fa45377b663d1d7d06641e;p=thirdparty%2Fbulma.git

Add spacing helpers examples
---

diff --git a/docs/documentation/helpers/spacing-helpers.html b/docs/documentation/helpers/spacing-helpers.html
index e60914c8c..94130da76 100644
--- a/docs/documentation/helpers/spacing-helpers.html
+++ b/docs/documentation/helpers/spacing-helpers.html
@@ -62,7 +62,7 @@ customValues:
   </ul>
 
   <p>
-    You need to <strong>combine</strong> a margin/padding prefix with a direciton suffix. For example:
+    You need to <strong>combine</strong> a margin/padding prefix with a direction suffix. For example:
   </p>
 
   <ul>
@@ -107,6 +107,29 @@ customValues:
   vertical=page.vertical
 %}
 
+<div class="content">
+  <p>
+    To use these classes, simply append them to any HTML element:
+  </p>
+</div>
+
+{% highlight html %}
+<!-- Adds 1rem of margin at the bottom -->
+<p class="mb-4">
+  Margin bottom
+</p>
+
+<!-- Adds 0.25rem of padding on the left and the right -->
+<p class="px-1">
+  Horizontal padding
+</p>
+
+<!-- Removes the margin on the right and adds 0.75rem padding at the top -->
+<p class="mr-0 pt-3">
+  Both
+</p>
+{% endhighlight %}
+
 {% include elements/anchor.html name="Configuration" %}
 
 {% capture custom %}