Bootstrap 4 - Align text in Lists - Twitter bootstrap

Samtuver
July 19, 2017
223 views
0 votes
2 Answers

i just started using bootstrap 4 and i’m unable to center text in a list-group .

In boostrap 3 , the following works perfectly :

.list-con {
  text-align:center;
}

However in boostrap 4 . text-align only works for multi line text .

li {
  text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="list-con">
  <ul class="list-group test">
    <li class="list-group-item test-item">
      Title
    </li>
    <li class="list-group-item test-item">
      Title2
    </li>
    <li class="list-group-item test-item">
      Morbi id neque a eros mattis tristique at a dolor. Quisque sapien tortor, suscipit ut varius id, dictum eget tortor. Sed elit diam, tincidunt sed fringilla a, dignissim in augue. Curabitur elementum ante eget erat eleifend, a blandit odio accumsan. Nullam
      mattis urna nec elit dapibus, vel suscipit nulla dictum. Etiam erat magna, dictum eget pharetra et
    </li>
  </ul>
</div>

Answers

You can achieve centered text in list groups with justify-content: center;, which

… defines how the browser distributes space between and around content items along the main axis of their container

See MDN for more information.

li {
  justify-content: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="list-con">
  <ul class="list-group test">
    <li class="list-group-item test-item">
      Title
    </li>
    <li class="list-group-item test-item">
      Title2
    </li>
    <li class="list-group-item test-item">
      Morbi id neque a eros mattis tristique at a dolor. Quisque sapien tortor, suscipit ut varius id, dictum eget tortor. Sed elit diam, tincidunt sed fringilla a, dignissim in augue. Curabitur elementum ante eget erat eleifend, a blandit odio accumsan. Nullam
      mattis urna nec elit dapibus, vel suscipit nulla dictum. Etiam erat magna, dictum eget pharetra et
    </li>
  </ul>
</div>

You may use dedicated class to this https://v4-alpha.getbootstrap.com/utilities/flexbox/

Flexbox

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.

https://v4-alpha.getbootstrap.com/utilities/flexbox/#justify-content

Justify content

Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, or around.

li {
  text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="list-con">
  <ul class="list-group test d-flex"><!-- tell bootsrap it is a flex-box -->
    <li class="list-group-item test-item d-flex justify-content-center"><!-- here flex class added -->
      flex class added here
    </li>
    <li class="list-group-item test-item">
      Title2
    </li>
    <li class="list-group-item test-item">
      Morbi id neque a eros mattis tristique at a dolor. Quisque sapien tortor, suscipit ut varius id, dictum eget tortor. Sed elit diam, tincidunt sed fringilla a, dignissim in augue. Curabitur elementum ante eget erat eleifend, a blandit odio accumsan. Nullam
      mattis urna nec elit dapibus, vel suscipit nulla dictum. Etiam erat magna, dictum eget pharetra et
    </li>
  </ul>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Bootstrap 4 – Align text in Lists – Twitter bootstrap

Answers