在 CSS 中添加固定大小的卡

Question

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.

Answer 1

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.