diff --git a/src/app/pages/ui/components/buttons/buttons.html b/src/app/pages/ui/components/buttons/buttons.html
index 99a31848..81ce1d68 100644
--- a/src/app/pages/ui/components/buttons/buttons.html
+++ b/src/app/pages/ui/components/buttons/buttons.html
@@ -1,21 +1,21 @@
 <div class="widgets">
   <div class="row">
-    <div class="col-md-3">
+    <div class="col-xl-3 col-lg-6 col-md-6">
       <ba-card title="Flat Buttons" baCardClass="with-scroll button-panel">
         <flat-buttons></flat-buttons>
       </ba-card>
     </div>
-    <div class="col-md-3">
+    <div class="col-xl-3 col-lg-6 col-md-6">
       <ba-card title="Raised Buttons" baCardClass="with-scroll button-panel">
         <raised-buttons></raised-buttons>
       </ba-card>
     </div>
-    <div class="col-md-3">
+    <div class="col-xl-3 col-lg-6 col-md-6">
       <ba-card title="Different Sizes" baCardClass="with-scroll button-panel df-size-button-panel">
         <sized-buttons></sized-buttons>
       </ba-card>
     </div>
-    <div class="col-md-3">
+    <div class="col-xl-3 col-lg-6 col-md-6">
       <ba-card title="Disabled" baCardClass="with-scroll button-panel">
         <disabled-buttons></disabled-buttons>
       </ba-card>
diff --git a/src/app/pages/ui/components/buttons/buttons.scss b/src/app/pages/ui/components/buttons/buttons.scss
index a3455c10..a60e09b1 100644
--- a/src/app/pages/ui/components/buttons/buttons.scss
+++ b/src/app/pages/ui/components/buttons/buttons.scss
@@ -128,3 +128,7 @@ $btn-icon-size: 34px;
   text-align: center;
   margin: 5px 0;
 }
+
+.btn-group.flex-dropdown {
+  display: flex;
+}
diff --git a/src/app/pages/ui/components/buttons/components/dropdownButtons/dropdownButtons.html b/src/app/pages/ui/components/buttons/components/dropdownButtons/dropdownButtons.html
index 04a84b39..0bc523cc 100644
--- a/src/app/pages/ui/components/buttons/components/dropdownButtons/dropdownButtons.html
+++ b/src/app/pages/ui/components/buttons/components/dropdownButtons/dropdownButtons.html
@@ -88,8 +88,8 @@
 <h5 class="panel-subtitle">Split button dropdowns</h5>
 
 <div class="row btns-row">
-  <div class="col-sm-4 col-xs-6">
-    <div class="btn-group" dropdown>
+  <div class="col-sm-4 col-xs-6 col-lg-4 col-md-6">
+    <div class="btn-group flex-dropdown" dropdown>
       <button type="button" class="btn btn-primary">Primary</button>
       <button type="button" class="btn btn-primary" dropdownToggle addToggleClass="true">
         <span class="sr-only">Toggle Dropdown</span>
@@ -103,8 +103,8 @@
       </ul>
     </div>
   </div>
-  <div class="col-sm-4 col-xs-6">
-    <div class="btn-group" dropdown>
+  <div class="col-sm-4 col-xs-6 col-lg-4 col-md-6">
+    <div class="btn-group flex-dropdown" dropdown>
       <button type="button" class="btn btn-success">Success</button>
       <button type="button" class="btn btn-success" dropdownToggle addToggleClass="true">
         <span class="sr-only">Toggle Dropdown</span>
@@ -118,8 +118,8 @@
       </ul>
     </div>
   </div>
-  <div class="col-sm-4 col-xs-6">
-    <div class="btn-group" dropdown>
+  <div class="col-sm-4 col-xs-6 col-lg-4 col-md-6">
+    <div class="btn-group flex-dropdown" dropdown>
       <button type="button" class="btn btn-info">Info</button>
       <button type="button" class="btn btn-info" dropdownToggle addToggleClass="true">
         <span class="sr-only">Toggle Dropdown</span>
@@ -133,8 +133,8 @@
       </ul>
     </div>
   </div>
-  <div class="col-sm-4 col-xs-6">
-    <div class="btn-group" dropdown>
+  <div class="col-sm-4 col-xs-6 col-lg-4 col-md-6">
+    <div class="btn-group flex-dropdown" dropdown>
       <button type="button" class="btn btn-default">Default</button>
       <button type="button" class="btn btn-default" dropdownToggle addToggleClass="true">
         <span class="sr-only">Toggle Dropdown</span>
@@ -148,8 +148,8 @@
       </ul>
     </div>
   </div>
-  <div class="col-sm-4 col-xs-6">
-    <div class="btn-group" dropdown>
+  <div class="col-sm-4 col-xs-6 col-lg-4 col-md-6">
+    <div class="btn-group flex-dropdown" dropdown>
       <button type="button" class="btn btn-warning">Warning</button>
       <button type="button" class="btn btn-warning" dropdownToggle addToggleClass="true">
         <span class="sr-only">Toggle Dropdown</span>
@@ -163,8 +163,8 @@
       </ul>
     </div>
   </div>
-  <div class="col-sm-4 col-xs-6">
-    <div class="btn-group" dropdown>
+  <div class="col-sm-4 col-xs-6 col-lg-4 col-md-6">
+    <div class="btn-group flex-dropdown" dropdown>
       <button type="button" class="btn btn-danger">Danger</button>
       <button type="button" class="btn btn-danger" dropdownToggle addToggleClass="true">
         <span class="sr-only">Toggle Dropdown</span>