Center align 'list group item' within Card in Bootstrap 4 Alpha 6?

Question

Does anyone know how to align the 'list-group-item' within Bootstrap 4 Alpha 6 update? I can add text-center to the card itself, which centrally aligns the card header and links, however the list group doesn't move.

I've tried the mx-auto class, this moves the text centrally, however the border is shrunk to only fit the text so looks out of place

Example of card text center issue.

This is the code I've been testing on:

<div class="card" style="width: 20rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-block">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Solution

Use align-items-center on the card..

  <div class="card align-items-center" style="width: 20rem;">
        <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-block text-center">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
        <ul class="list-group list-group-flush">
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Vestibulum at eros</li>
        </ul>
        <div class="card-block">
            <a href="#" class="card-link">Card link</a>
            <a href="#" class="card-link">Another link</a>
        </div>
  </div>

Demo http://www.codeply.com/go/cc1EYpkRSe

EDIT Based on comments, you'd have to center align each <li> like this..

<ul class="list-group list-group-flush w-100 align-items-stretch">
   <li class="list-group-item text-center d-inline-block">Cras justo odio</li>
   <li class="list-group-item text-center d-inline-block">Dapibus ac facilisis in</li>
   <li class="list-group-item text-center d-inline-block">Vestibulum at eros</li>
</ul>

Comments

[andycl1]

Hey Zim, thanks for the reply, the issue with that is that the border/lines that separate the list items don't fill the width of the card when they are centered..?

[andycl1]

Thanks Zim, that worked a charm, when I've got the reputation I'll upvote the reply!