I've tried and failed to adjust a fixed size for a card I'm implementing in my page.
The thing is that, it only gets adjusted based in the amount of characters the "progress" has in the description.
Here is a picture of what I mean, and where I want it to have (the red line represents the desired size):
Here is my code:
<div class="container-xl container-fluid py-3">
<div class="row">
<div class="card card-progress">
<div class="card-body">
<h3 class="pb-3">A title</h3>
<div class="h3 mb-2">A description</div>
<hr/>
<div style="padding-top: 2%"></div>
<div class="h5">Updated progress:</div>
<div class="progress mb-4">
<div
role="progressbar"
style="width: {{ $progress->progress }}%"
aria-valuenow="{{ $progress->progress }}"
aria-valuemin="0"
aria-valuemax="100"
class="progress-bar progress-bar bg-primary"
></div>
</div>
<div class="d-flex justify-content-between">
<div class="text-left">
<div>Progress made by:</div>
<div class="text-primary h3 mb-0">
<p>
Daniel
</p>
</div>
</div>
<div class="text-right">
<div>Current progress of the homework after this addition:</div>
<div class="text-primary h3 mb-0">
<p>
87%
</p>
</div>
</div>
</div>
<a href="#" class="btn btn-danger"><i data-feather="trash" class="icon-light icons-sm"></i></a>
<a href="#" class="btn btn-warning"><i data-feather="edit" class="icon-light icons-sm"></i></a>
</div>
</div>
</div>
</div>
Please do not offer hard-coded solutions.
It looks like you're Bootstrap 4.
So, the simplest solution would be to add the .w-100
class to the card. Which sets the width of the card to 100% of the container.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.