Virtualize breaks bootstrap 5.1 grid

[rsescalante]

Hello,

Using this code:

<div class="row align-items-stretch">
    <div class="col-md-6 col-xl-3 mb-4">
        <div class="card h-100 align-self-center" style="cursor: pointer;">
            <div class="card-body d-flex align-self-center" @onclick="AddUser">
                <div class="row">
                    <div class="col-12 card-title align-self-center">
                        <h2 class="text-center">Add User</h2>
                        <div class="text-center">
                            <span class="oi oi-plus text-center" aria-hidden="true" style="color: #296890;font-size:3em;"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @if (usersList.Any())
    {
        <Virtualize Context="user" Items="@usersList">
            <div class="col-md-6 col-xl-3 mb-4">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12 card-title text-end">
                                <span aria-hidden="true" class="oi oi-pencil btn btn-primary" style="color:white; cursor:pointer" @onclick="@(()=> OnEdit(user))"></span>
                            </div>
                            <div class="col-12 card-body">
                                <h3>@user.FullNuame</h3>
                            </div>
                        </div>
                    </div>                   
                </div>
            </div>
        </Virtualize>
    }

</div>

On Bootstrap 4.3 the columns appear next to each other including the element to add users, something like this:

Add User | Col 1 | Col 2 | Col 3 Col 4 | Col 5 | Col 6 | ...

On bootstrap 5.1 included in net core 6, the first column has a break after it and the rest of the columns appear next to each other, something like this:

Add User | Col 1 | Col 2 | Col 3 | Col 4 | Col 5 | Col 6 | ...

I found that the culprit is the following div inserted by virtualize before the first element of the list:

<div style="height: 0px;" _bl_9=""></div>

This line appears in both netcore 5 and netcore 6, but since netcore 5 uses bootstrap 4.3 it doesn't breaks. Is there a solution or should I use bootstrap 4.3 instead of 5.1 with netcore 6?

Best regards

[rsescalante]

Hello Anthony,

Thanks for your reply. Using bootstrap 4.3 is what I did to fix the issue. Nevertheless it is a workaround, the behavior of Virtualize won't let us use the new bootstrap version under this conditions.