Something went wrong while setting issue due date.
Flex display on list group items causing incorrect spacing within
Closed
Flex display on list group items causing incorrect spacing within
Created by: 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 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>