CSS ListGroup formatieren?

[Dsimon24]

Hallo zusammen,

in Laravel erstelle ich mit Hilfe von Bootstrap eine List-Group - siehe Beispiel.

  <div class="list-group"></div>
    <button type="button" class="list-group-item list-group-item-action active">Heute</button>
      <a href="#" data-toggle="modal" data-target="#exampleModal{{ $x->id }}"
         class="list-group-item d-flex justify-content-between align-items-center" style="text-align:left;">
        {{ $x->bezeichnung }} <br> {{ date('d.m.Y', strtotime($x->datum)) }}
        <span class="badge badge-danger badge-pill">{{ number_format($x->betrag,2) }} €</span>
      </a>
  </div>

Dort erhalte ich links die Bezeichnung und darunter das Datum.
Auf der rechten Seite steht dort ein entsprechenderBetrag.

Jetzt möchte ich aber die Bezeichnung größer als das Datum haben (Schriftgröße).
Parallel dazu möchte ich vor Bezeichnung unt Datum noch ein Image haben.
Leider verschiebt sich das ganze, wenn ich es mit span einbinde.

Gibt es noch eine andere Möglichkeit, die Styles und das Image einzubinden,
damit sich die ListGroup nicht verschiebt und alles optisch mgl. passt?

 

[LoRDxRaVeN]

Mit Laravel habe ich keine Erfahrung, aber wenn du das Datum und die Bezeichnung unterschiedlich formatieren willst, wirst du es in eigene Tags packen müssen. Für die Images davor bietet sich u.U. die Pseudo-Klasse :before an. Was sich da verschiebt, ist für uns ohne dem CSS und wahrscheinlich auch ohne dem restlichem HTML nicht nachvollziehbar, also müsstest du uns schon mehr davon zur Verfügung stellen. Außerdem schaut es so aus, wie wenn du das <div> gleich wieder schließt, aber auch da kann ich natürlich nicht sagen, ob sich das irgendwie auswirkt, weil ich ja das CSS nicht kenne

LG

Nachtrag: Ich sehe gerade, dass du Bootstrap verwendest - habe ich auch keine Erfahrung, aber vll. schaue ich es mir im Laufe des Tages kurz an.

Nachtrag 2:
Hilft dir das nachfolgende schon weiter? Images vor Bezeichnung und das Datum hat eine kleinere Schrift. Ich habe natürlich überhaupt keine Ahnung, was überhaupt dein Ziel ist, insbesondere was du mit der list-group machen willst aber gleichzeitig keine Liste hast oder für was der button sein soll...

https://codepen.io/n-tchen/pen/MdgBmO?editors=1100#0