Laravel/Bootstrap 5 - Making a card row shrinks its image - php

Question

I'm using Bootstrap's 5 card and Laravel to make a car card. When I try to make a row with cards, the image shrinks. If I remove the "row" class, its image fits perfectly. ¿How can I solve this issue?
<h1>Vehículos</h1>
<div class="row">
#foreach ($autos as $auto)
<div class="card" style="width: 18rem; border-radius: 25px;">
<a href="{{ URL('auto/'.$auto->id)}}">
<img src="{{ URL('images/'.$auto->foto)}}" class="card-img-top" alt="..." style="border-top-right-radius: 25px; border-top-left-radius: 25px;">
</a>
<div class="card-body">
<h5 class="card-title">{{$auto->marca." ".$auto->modelo}}</h5>
<p class="card-text">
Año: {{$auto->año}}
Kilometros: {{$auto->kilometros}}
Motor: {{$auto->motor}}
Combustible: {{$auto->combustible}}
Precio: $ {{$auto->precio}}
</p>
</div>
</div>
#endforeach
</div>
</div> ```
[1]: https://i.stack.imgur.com/TviHn.png

Answer 1

I had to reproduce the error on my own end and I found the issue. When using a bootstrap row , you have to add columns using the col class. So change your code to this
<h1>Vehículos</h1>
<div class="row">
#foreach ($autos as $auto)
<div class="col">
<div class="card" style="width: 18rem; border-radius: 25px;">
<a href="{{ URL('auto/'.$auto->id)}}">
<img src="{{ URL('images/'.$auto->foto)}}" class="card-img-top" alt="..." style="border-top-right-radius: 25px; border-top-left-radius: 25px;">
</a>
<div class="card-body">
<h5 class="card-title">{{$auto->marca." ".$auto->modelo}}</h5>
<p class="card-text">
Año: {{$auto->año}}
Kilometros: {{$auto->kilometros}}
Motor: {{$auto->motor}}
Combustible: {{$auto->combustible}}
Precio: $ {{$auto->precio}}
</p>
</div>
</div>
</div>
#endforeach
</div>
</div>
This would fix the issue of the image being shrinked.
SIDENOTE: Do note that the bootstrap col class has prefixes to make it adapt to different screens. You can check out the docs for more info.