From 052bfe1ca76a9d188aa05be6e713f8f7596b2a3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= <gael.poupard@orange.com>
Date: Mon, 7 Oct 2019 11:38:15 +0200
Subject: [PATCH] fix(doc): improve buttons example in doc after #189

---
 site/_includes/boostwatch/buttons.html | 22 +++++++++++-----------
 site/docs/4.3/components/buttons.md    | 10 +++++-----
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/site/_includes/boostwatch/buttons.html b/site/_includes/boostwatch/buttons.html
index c6a479586c..5cf73cb352 100644
--- a/site/_includes/boostwatch/buttons.html
+++ b/site/_includes/boostwatch/buttons.html
@@ -78,23 +78,23 @@ <h3 id="disabled-black-bg">Disabled</h3>
   </p>
 </div>
 
-<div>
+<div class="mt-3">
     <h3>Social buttons</h3>
-    <p>
-        <a class="btn btn-fbk btn-social" href="#" aria-label="Facebook"></a> 
-        <a class="btn btn-tw btn-social" href="#" aria-label="Twitter"></a> 
+    <p class="p-3">
+        <a class="btn btn-fbk btn-social" href="#" aria-label="Facebook"></a>
+        <a class="btn btn-tw btn-social" href="#" aria-label="Twitter"></a>
         <a class="btn btn-gplus btn-social" href="#" aria-label="Google Plus"></a>
-        <a class="btn btn-lin btn-social" href="#" aria-label="Linkedin"></a>  
-        <a class="btn btn-mail btn-social" href="#" aria-label="Mail"></a> 
+        <a class="btn btn-lin btn-social" href="#" aria-label="Linkedin"></a>
+        <a class="btn btn-mail btn-social" href="#" aria-label="Mail"></a>
     </p>
     <div>
         <h3>Dark Background</h3>
-        <p class="bg-dark">
-            <a class="btn btn-fbk-inverse btn-social" href="#" aria-label="Facebook"></a> 
-            <a class="btn btn-tw-inverse btn-social" href="#" aria-label="Twitter"></a> 
+        <p class="bg-dark p-3">
+            <a class="btn btn-fbk-inverse btn-social" href="#" aria-label="Facebook"></a>
+            <a class="btn btn-tw-inverse btn-social" href="#" aria-label="Twitter"></a>
             <a class="btn btn-gplus-inverse btn-social" href="#" aria-label="Google Plus"></a>
-            <a class="btn btn-lin-inverse btn-social" href="#" aria-label="Linkedin"></a>  
-            <a class="btn btn-mail-inverse btn-social" href="#" aria-label="Mail"></a> 
+            <a class="btn btn-lin-inverse btn-social" href="#" aria-label="Linkedin"></a>
+            <a class="btn btn-mail-inverse btn-social" href="#" aria-label="Mail"></a>
         </p>
     </div>
 </div>
diff --git a/site/docs/4.3/components/buttons.md b/site/docs/4.3/components/buttons.md
index 04ea3a898c..ad1a6f1214 100644
--- a/site/docs/4.3/components/buttons.md
+++ b/site/docs/4.3/components/buttons.md
@@ -26,7 +26,7 @@ Boosted includes several predefined button styles, each serving its own semantic
 To get the inversed button behaviour, simply add `.btn-inverse` class to your `<button>` or `<a>` tag.
 
 {% capture example %}
-<div style="background-color: black; padding: 2rem">
+<div class="bg-dark p-3">
     {% for color in site.data.theme-colors %}
     <button type="button" class="btn btn-inverse btn-{{ color.name }}">{{ color.name | capitalize }}</button>{% endfor %}
 
@@ -36,7 +36,7 @@ To get the inversed button behaviour, simply add `.btn-inverse` class to your `<
 {% include example.html content=example %}
 
 {% capture example %}
-<div style="background-color: #595959; padding: 2rem">
+<div class="p-3" style="background-color: #595959">
     {% for color in site.data.theme-colors %}
     <button type="button" class="btn btn-inverse btn-{{ color.name }}">{{ color.name | capitalize }}</button>{% endfor %}
 
@@ -50,7 +50,7 @@ To get the inversed button behaviour, simply add `.btn-inverse` class to your `<
 The default styles can be used on secondary colors backgrounds, in this case remove the `.btn-inverse` class if any.
 
 {% capture example %}
-<div style="background-color: #eee; padding: 2rem">
+<div class="bg-light p-3">
     {% for color in site.data.theme-colors %}
     <button type="button" class="btn btn-{{ color.name }}">{{ color.name | capitalize }}</button>{% endfor %}
 
@@ -65,7 +65,7 @@ In need of a social media button? Some helper classes are designed to be used wi
 `.btn-fbk`, `.btn-tw`, `.btn-gplus`, `.btn-lin`, `.btn-mail` are available for light and dark background.
 
 {% capture example %}
-<div style="padding: 2rem">
+<div class="p-3">
     <a class="btn btn-fbk btn-social" href="#" aria-label="Facebook"></a> 
     <a class="btn btn-tw btn-social" href="#" aria-label="Twitter"></a> 
     <a class="btn btn-gplus btn-social" href="#" aria-label="Google Plus"></a>
@@ -77,7 +77,7 @@ In need of a social media button? Some helper classes are designed to be used wi
 
 
 {% capture example %}
-<div style="background-color: #000; padding: 2rem">
+<div class="bg-dark p-3">
     <a class="btn btn-fbk-inverse btn-social" href="#" aria-label="Facebook"></a> 
     <a class="btn btn-tw-inverse btn-social" href="#" aria-label="Twitter"></a> 
     <a class="btn btn-gplus-inverse btn-social" href="#" aria-label="Google Plus"></a>