diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index f17fb9bb11..ce1eee1298 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -3,6 +3,11 @@
// Easily usable on
, , or .
.list-group {
+ @if $enable-flex {
+ display: flex;
+ flex-direction: column;
+ }
+
// No need to set list-style: none; since .list-group-item is block level
padding-left: 0; // reset padding because ul and ol
margin-bottom: 0;
@@ -14,8 +19,15 @@
// Use on `li`s or `div`s within the `.list-group` parent.
.list-group-item {
+ @if $enable-flex {
+ display: flex;
+ flex-flow: row wrap;
+ align-items: center;
+ } @else {
+ display: block;
+ }
+
position: relative;
- display: block;
padding: $list-group-item-padding-y $list-group-item-padding-x;
// Place the border on the list items and negative margin up for better styling
margin-bottom: -$list-group-border-width;