Trying to justify-content-between inside an unordered list (UL), but it doesnt seems to be working

Est_rezz 0
Viewed 12

I am trying to create a list in bootstrap. It seems that justify-content-between is not working here. What am I doing wrong? (I want the $ aligned to the right)

<div class="row">
   <div class="col-md-6">

        <div class = "text-info"> 
             <h5> Cambios </h5>
        </div>
     <ul class="list-group">
          {% for c in cambios%}
               <li class="list-group-item d-flex justify-content-between">
                     <div>
                         <h6 class="my-0">{{c['cantidad']}} &nbsp; {{c['producto']}}</h6>
                         <small class="text-muted"> X &nbsp; {{c['cambio_por']}}</small> 
                      </div>    
                      <span >{{ "${:,.0f}".format(c['diferencia']) }}/span>
                      <br>
                </li>
           {% endfor %}
      </ul>
    </div>

    <div class="col-md-6">
    </div>
</div>

enter image description here

bootstrap-4
1 Answers

Looks like your <span> tag that contains the price is broken

<span>{{ "${:,.0f}".format(c['diferencia']) }}/span>

Your missing the < at the beginning of the closing tag, it should be

<span>{{ "${:,.0f}".format(c['diferencia']) }}</span>

Also the <br> tag is being grouped as part of the space between, so thats whats taking up the empty space on the right of each item

This is without the <br> tag

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
   <div class="col-md-6">

        <div class = "text-info"> 
             <h5> Cambios </h5>
        </div>
     <ul class="list-group">
               <li class="list-group-item d-flex justify-content-between">
                     <div>
                         <h6 class="my-0">Title</h6>
                         <small class="text-muted">Quantity</small> 
                      </div>    
                      <span>$Price</span>
                </li>
      </ul>
    </div>

    <div class="col-md-6">
    </div>
</div>

This is with the <br> tag

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
   <div class="col-md-6">

        <div class = "text-info"> 
             <h5> Cambios </h5>
        </div>
     <ul class="list-group">
               <li class="list-group-item d-flex justify-content-between">
                     <div>
                         <h6 class="my-0">Title</h6>
                         <small class="text-muted">Quantity</small> 
                      </div>    
                      <span>$Price</span>
                      <br>
                </li>
      </ul>
    </div>

    <div class="col-md-6">
    </div>
</div>

JDawwgy0
Related