2

Hello I have List Group with font icon, text and badge. I want to align badge to the right, but cannot figure out how. In docs there is only one example with justify-content-between, but that justify content between all three elements, I want only badge to go right.

https://jsfiddle.net/matejvrzala/c0u7px6L/

if I put justify-content-between after font icon it does not do anything.

<ul class="list-group">
  <li class="list-group-item active">
    <i class="fa fa-user" aria-hidden="true"></i>
      <div class="justify-content-between">
        Cras justo odio<span class="badge badge-default badge-pill">14</span>        
      </div>
  </li>
</ul>

2 Answers 2

4

step 1: Take the badge outside of the div:

<li class="list-group-item active">
  <i class="fa fa-user" aria-hidden="true"></i>
  <div class="justify-content-between">Cras justo odio</div>
  <span class="badge badge-default badge-pill">14</span>
</li>

step 2: Display the badge flex and give it a margin-left: auto;

.badge {
 display: flex;
 margin-left: auto;
}
2
  • thanks, it works. And justify-content-between is useless to it does not have to be there at all Commented Jan 27, 2017 at 15:46
  • 1
    actually only margin-left: auto is important part Commented Jan 27, 2017 at 15:57
4

Try this )

<ul class="list-group">
  <li class="list-group-item active">
      <div class="user">
        <i class="fa fa-user" aria-hidden="true"></i>
        Cras justo odio
      </div>
      <span class="badge badge-default badge-pill">14</span>
  </li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

.fa {
  margin-right: 15px;
}

.list-group-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

live demo - https://jsfiddle.net/c0u7px6L/1/

1
  • 1
    I guess your answer is better than the select answer. Thanks.
    – NoChance
    Commented Sep 10, 2018 at 12:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.