Bootstrap card with fixed width in a column (responsive)

Question

I have a Bootstrap-card but there is a problem with its width. I'd like to that card will take a full with of the column which I set. Here is a piece of code that I use and screenshot which presents actual width and wanted (with blue background).

Do you know any nice solution to make my goal fixed? Please take into consideration the responsive view.

<div class="row">
    <ng-container *ngFor="let event of events">
        <div class="col-12 col-lg-6 d-flex mt-5">
            <!-- Card -->
            <div class="card shadow-light-lg lift lift-lg">
                <a class="card-body my-auto">
                    <div class="d-flex justify-content-between align-content-center align-items-center py-3">
                        <!-- some content -->
                        <h3 class="mt-auto">
                            {{event.title}}
                        </h3>

                        <div class="mb-0 text-muted" id="card-description">
                            {{event.description}}
                        </div>
                    </div>
                </a>
            </div>
        </div>
        ...
    </ng-container>
</div>

can you provide a snippet of yours problem? – Nisharg Shah Apr 12 '20 at 20:33 — Nisharg Shah, Apr 12 '20 at 20:33

score 2 · Accepted Answer · answered Apr 12 '20 at 20:33

The width is not being applied properly. Either give width of 100%. Secondly you are using display-flex. So like parent has flex then items be given respective width.

Kindly share your code on stackblitz so we can better assist you. It will be much easier to debug.

Bootstrap card with fixed width in a column (responsive)

1 Answers1