Flex display on list group items causing incorrect spacing within

[lehresman]

I just upgraded my project to Alpha 6, and oddly a lot of the spacing seems to have been removed. The only thing I changed between these two screenshots is installing alpha.5 vs alpha.6 using npm (on my Angular 2.4.1 project). In the alpha.5 screenshot, I included bootstrap-flex, but had to change that to bootstrap for the alpha.6 screenshot because of the naming change. That's the only difference.

Here is a before and after:

Here is the HTML:

<div class="row">
  <div class="col-sm-7">

    ...

  </div>
  <div class="col-sm-5">

    <div class="card card-danger">
      <div class="card-header">
        <span class="font-weight-bold">27 Uncompleted Appointments</span>
      </div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item text-truncate">
          <i class="fa fa-calendar text-alert-red-color"></i>
          Mark  <b>Jacobs</b>  (Sally)
          <div class="text-muted text-small">Mon, Jan 1, 2017 - 8am-9:30am</div>
        </li>
        <li class="list-group-item text-truncate">
          <i class="fa fa-calendar text-alert-red-color"></i>
          Billy Bob <b>Thorton</b> (June)
          <div class="text-muted text-small">Mon, Jan 1, 2017 - 8am-9:30am</div>
        </li>
        <li class="list-group-item text-truncate">
          <i class="fa fa-calendar text-alert-red-color"></i>
          <b>1st Assembly of God</b> (John Smith)
          <div class="text-muted text-small">Mon, Jan 1, 2017 - 8am-9:30am</div>
        </li>
        <li class="list-group-item text-xs-center">
          <button class="btn btn-danger">See All 27 <i class="fa fa-caret-right"></i></button>
        </li>
      </ul>
    </div>

    <div class="card card-danger">
      <div class="card-header">
        <b>1 Pending Reservation</b>
      </div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">
          <i class="fa fa-calendar text-alert-red-color"></i>
          Mark <b>Jacobs</b> (Sally)
          <div class="text-muted text-small">Mon, Jan 8, 2017 - 11am-12:45pm</div>
        </li>
      </ul>
    </div>

  </div>
</div>

[lehresman]

Notice event the spacing between the words is removed.

[mdo]

Yeah, we'll need to play with the flexbox styles here more. My hunch is that we'll need to remove display: flex from .list-group-items and apply is only when needed (e.g., the custom content section in the list group docs).

[mdo]

For the original issue between cards, I've removed the default margin-bottom from .cards (and other components). Rather than rely on some arbitrary default spacing. you can now pick exactly what you need with our spacing utilities.

[nextgenthemes]

I was about to post the same Issue. Since I created the pen already here is a pretty reduced test case.

What is the point for making list items flexbox? Not saying it does not has benefits, just curious.