[FIX] website: add a margin bottom on snippet buttons

Add a margin bottom on snippet buttons. So when there are 2 buttons (or
more) on the same line, we have a space between them on small devices
when displayed vertically.

task-2327741

closes odoo/odoo#60592

Related: odoo/design-themes#419
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

11 files changed, 15 insertions, 15 deletions

diff --git a/addons/website/views/snippets/s_banner.xml b/addons/website/views/snippets/s_banner.xml
index 8e75603d6b0..4e0dfea70ab 100644
--- a/addons/website/views/snippets/s_banner.xml
+++ b/addons/website/views/snippets/s_banner.xml
@@ -10,7 +10,7 @@
                     <h1><font style="font-size: 62px;">Sell Online. Easily.</font></h1>
                     <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
                     <p class="lead"><br/></p>
-                    <a href="#" class="btn btn-primary">Do something</a>
+                    <a href="#" class="btn btn-primary mb-2">Do something</a>
                 </div>
             </div>
         </div>
diff --git a/addons/website/views/snippets/s_call_to_action.xml b/addons/website/views/snippets/s_call_to_action.xml
index 94b17d104ab..5247606344b 100644
--- a/addons/website/views/snippets/s_call_to_action.xml
+++ b/addons/website/views/snippets/s_call_to_action.xml
@@ -11,7 +11,7 @@
                 </div>
                 <div class="col-lg-3 pt8">
                     <p style="text-align: right;">
-                        <a href="/contactus" class="btn btn-primary btn-lg">Contact us</a>
+                        <a href="/contactus" class="btn btn-primary btn-lg mb-2">Contact us</a>
                     </p>
                 </div>
             </div>
diff --git a/addons/website/views/snippets/s_carousel.xml b/addons/website/views/snippets/s_carousel.xml
index cf4bdbe39e5..76c0ab7d935 100644
--- a/addons/website/views/snippets/s_carousel.xml
+++ b/addons/website/views/snippets/s_carousel.xml
@@ -20,7 +20,7 @@
                                  <h2><font style="font-size: 62px;">Slide Title</font></h2>
                                 <p class="lead">Use this snippet to presents your content in a slideshow-like format. Don't write about products or services here, write about solutions.</p>
                                 <p>
-                                    <a href="/contactus" class="btn btn-primary">Contact us</a>
+                                    <a href="/contactus" class="btn btn-primary mb-2">Contact us</a>
                                 </p>
                             </div>
                         </div>
@@ -36,7 +36,7 @@
                                     <hr class="w-25 mx-auto" style="border-top-width: 1px; border-top-style: solid;"/>
                                 </div>
                                 <p class="lead">Storytelling is powerful.<br/> It draws readers in and engages them.</p>
-                                <p><a href="/" class="btn btn-primary">Start your journey</a></p>
+                                <p><a href="/" class="btn btn-primary mb-2">Start your journey</a></p>
                             </div>
                         </div>
                     </div>
diff --git a/addons/website/views/snippets/s_color_blocks_2.xml b/addons/website/views/snippets/s_color_blocks_2.xml
index c58362a504f..b48bddc8eb3 100644
--- a/addons/website/views/snippets/s_color_blocks_2.xml
+++ b/addons/website/views/snippets/s_color_blocks_2.xml
@@ -9,13 +9,13 @@
                     <i class="fa fa-shield fa-5x m-3"/>
                     <h2>A color block</h2>
                     <p>Color blocks are a simple and effective way to <b>present and highlight your content</b>. Choose an image or a color for the background. You can even resize and duplicate the blocks to create your own layout. Add images or icons to customize the blocks.</p>
-                    <a href="#" class="btn btn-primary">More Details</a>
+                    <a href="#" class="btn btn-primary mb-2">More Details</a>
                 </div>
                 <div class="col-lg-6 o_cc o_cc5 text-center">
                     <i class="fa fa-cube fa-5x m-3"/>
                     <h2>Another color block</h2>
                     <p>Color blocks are a simple and effective way to <b>present and highlight your content</b>. Choose an image or a color for the background. You can even resize and duplicate the blocks to create your own layout. Add images or icons to customize the blocks.</p>
-                    <a href="#" class="btn btn-primary">More Details</a>
+                    <a href="#" class="btn btn-primary mb-2">More Details</a>
                 </div>
             </div>
         </div>
diff --git a/addons/website/views/snippets/s_comparisons.xml b/addons/website/views/snippets/s_comparisons.xml
index 033338758ea..987eaca3ce5 100644
--- a/addons/website/views/snippets/s_comparisons.xml
+++ b/addons/website/views/snippets/s_comparisons.xml
@@ -24,7 +24,7 @@
                         </ul>
                         <div class="card-footer">
                             <p><i>Instant setup, satisfied or reimbursed.</i></p>
-                            <a href="/contactus" class="btn btn-primary">Order now</a>
+                            <a href="/contactus" class="btn btn-primary mb-2">Order now</a>
                         </div>
                     </div>
                 </div>
@@ -47,7 +47,7 @@
                         </ul>
                         <div class="card-footer">
                             <p><i>Instant setup, satisfied or reimbursed.</i></p>
-                            <a href="/contactus" class="btn btn-primary">Start now</a>
+                            <a href="/contactus" class="btn btn-primary mb-2">Start now</a>
                         </div>
                     </div>
                 </div>
@@ -70,7 +70,7 @@
                         </ul>
                         <div class="card-footer">
                             <p><i>Instant setup, satisfied or reimbursed.</i></p>
-                            <a href="/contactus" class="btn btn-primary">Contact us</a>
+                            <a href="/contactus" class="btn btn-primary mb-2">Contact us</a>
                         </div>
                     </div>
                 </div>
diff --git a/addons/website/views/snippets/s_cover.xml b/addons/website/views/snippets/s_cover.xml
index 528476b7c70..caaa0c2a76c 100644
--- a/addons/website/views/snippets/s_cover.xml
+++ b/addons/website/views/snippets/s_cover.xml
@@ -9,7 +9,7 @@
             <h1 style="text-align: center;"><font style="font-size: 62px; font-weight: bold;">Catchy Headline</font></h1>
             <p class="lead" style="text-align: center;">Write one or two paragraphs describing your product, services or a specific feature.<br/> To be successful your content needs to be useful to your readers.</p>
             <p style="text-align: center;">
-                <a href="/contactus" class="btn btn-primary">Contact us</a>
+                <a href="/contactus" class="btn btn-primary mb-2">Contact us</a>
             </p>
         </div>
     </section>
diff --git a/addons/website/views/snippets/s_image_text.xml b/addons/website/views/snippets/s_image_text.xml
index cea17f74a41..ee8dedf8f95 100644
--- a/addons/website/views/snippets/s_image_text.xml
+++ b/addons/website/views/snippets/s_image_text.xml
@@ -12,7 +12,7 @@
                     <h2>Section Subtitle</h2>
                     <p>Write one or two paragraphs describing your product or services. To be successful your content needs to be useful to your readers.</p>
                     <p>Start with the customer – find out what they want and give it to them.</p>
-                    <p><a href="#" class="btn btn-primary">Discover more</a></p>
+                    <p><a href="#" class="btn btn-primary mb-2">Discover more</a></p>
                 </div>
             </div>
         </div>
diff --git a/addons/website/views/snippets/s_media_list.xml b/addons/website/views/snippets/s_media_list.xml
index 76720cc29bb..f1470e65d64 100644
--- a/addons/website/views/snippets/s_media_list.xml
+++ b/addons/website/views/snippets/s_media_list.xml
@@ -13,7 +13,7 @@
                         <div class="col-lg-8 s_media_list_body">
                             <h3>Media heading</h3>
                             <p>Use this snippet to build various types of components that feature a left- or right-aligned image alongside textual content. Duplicate the element to create a list that fits your needs.</p>
-                            <a href="#" class="btn btn-primary">Discover</a>
+                            <a href="#" class="btn btn-primary mb-2">Discover</a>
                         </div>
                     </div>
                 </div>
diff --git a/addons/website/views/snippets/s_popup.xml b/addons/website/views/snippets/s_popup.xml
index a51980a3a23..0dc47df0f35 100644
--- a/addons/website/views/snippets/s_popup.xml
+++ b/addons/website/views/snippets/s_popup.xml
@@ -23,7 +23,7 @@
                                 <div class="col-lg-10 offset-lg-1 text-center o_cc o_cc1 jumbotron pt48 pb48">
                                     <h2><font style="font-size: 62px;">Win $20</font></h2>
                                     <p class="lead">Check out now and get $20 off your first order.</p>
-                                    <a href="#" class="btn btn-primary">New customer</a>
+                                    <a href="#" class="btn btn-primary mb-2">New customer</a>
                                 </div>
                             </div>
                         </div>
diff --git a/addons/website/views/snippets/s_showcase.xml b/addons/website/views/snippets/s_showcase.xml
index 5d4e5600892..1b1ea7deb7b 100644
--- a/addons/website/views/snippets/s_showcase.xml
+++ b/addons/website/views/snippets/s_showcase.xml
@@ -49,7 +49,7 @@
         </div>
         <div class="container text-lg-center">
             <p><br/></p>
-            <a href="#" class="btn btn-primary">Discover all the features</a>
+            <a href="#" class="btn btn-primary mb-2">Discover all the features</a>
         </div>
     </section>
 </template>
diff --git a/addons/website/views/snippets/s_text_image.xml b/addons/website/views/snippets/s_text_image.xml
index efbee3b12a2..779a747d780 100644
--- a/addons/website/views/snippets/s_text_image.xml
+++ b/addons/website/views/snippets/s_text_image.xml
@@ -9,7 +9,7 @@
                     <h2>A Section Subtitle</h2>
                     <p>Write one or two paragraphs describing your product or services. To be successful your content needs to be useful to your readers.</p>
                     <p>Start with the customer – find out what they want and give it to them.</p>
-                    <p><a href="#" class="btn btn-primary">Learn more</a></p>
+                    <p><a href="#" class="btn btn-primary mb-2">Learn more</a></p>
                 </div>
                 <div class="col-lg-6 pt16 pb16">
                     <img src="/web/image/website.s_text_image_default_image" class="img img-fluid mx-auto" alt=""/>