Im trying to design card on my website. Unfortunetly i cant use 100% of my card because somehow the grid system is cutting of the content at the half of the length. This is how it looks like
I need to implement the bootstrap grid system to make it responsive. Here is the code i used for this:
<div class="row flex">
<div class="col-12 flex">
<div id="offercards" style="margin-top: 10px; align-items: start" class="card col-12">
<div class="row">
<div class="col-12 col-md-6">
<span style="font-weight: bold">Hamburg</span> nach <span style="font-weight: bold">München</span>
</div>
<div class="col-12 col-md-3" style="padding-top: 10px">
So, 25.09.2022 9Uhr
</div>
<div class="col-12 col-md-3">
<img style="height: 100px; width: 100px; border-radius: 100px" src="../../assets/images/Offers/frau.jpg">
</div>
</div>
<div class="row">
<div class="col-6 col-md-4" style="font-weight: bold">
<i style="color:#3A9B8F" class="bi bi-person"></i>
3
</div>
<div class="col-6 col-md-4" style="font-weight: bold">
<i style="color:#3A9B8F " class="bi bi-minecart-loaded"></i>
50kg
</div>
<div class="col-12 col-md-4" style="font-weight: bold">
<i style="color:#3A9B8F" class="bi bi-search"></i>
1,50m x 2m
</div>
</div>
<div class="row">
<div class="col-6 col-md-3">
<i style="color:#3A9B8F" class="bi bi-check-lg"></i>Nichtraucher
</div>
<div class="col-6 col-md-3">
<i style="color:#3A9B8F" class="bi bi-check-lg"></i>Keine Tiere
</div>
<div class="col-6 col-md-3">
<i style="color:#3A9B8F" class="bi bi-check-lg"></i>Musik
</div>
<div class="col-6 col-md-3">
<i style="color:#3A9B8F" class="bi bi-x-lg"></i>Unterhaltung
</div>
</div>
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-end" style="padding-top: 10px;">
<span style="font-weight: bold; font-size: 30px">30€</span>
<button class="btn btn-primary ml-3">Buchen</button>
</div>
</div>
</div>
</div>
</div>
I tried using flex end and changing the column size.
Does anyone have a solution for this? Im running out of ideas.
