CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4twitter-bootstrap-4
andycl1
andycl1

Reputation: 67

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

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>

Upvotes: 3

Views: 16548

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362700

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>

Upvotes: 9

Related Questions