I’m writing a web page and the tags don’t show as buttons correctly even though they should.

@page
@model Rubrica.Pages.IndexModel

<div action="row">
    <div class="col-12">
        <h1>Rubrica</h1>
    </div>
</div>
<div class="row py-2">
    <div class="col-12">
        <a asp-page="Create" class="btn btn-primary">Crea contatto</a>
    </div>
</div>
<div class="table">
    ...
    @foreach (var item in Model.Contatti)
    {
        <div class="row align-middle bottom-line-light">
            <div class="col-1">
                @item.Nome
            </div>
            <div class="col-1">
                @item.Cognome
            </div>
            <div class="col-1">
                @item.Sesso
            </div>
            <div class="col-2">
                @item.DataNascita
            </div>
            <div class="col-2">
                @item.NumeroTelefono
            </div>
            <div class="col-2">
                @item.Email
            </div>
            <div class="col-1">
                @item.Citta
            </div>
            <div class="col-2">
                <a asp-page="./Edit" asp-route-id="1" class="btn btn-primary">Edit</a>
                <a asp-page="./Details" asp-route-id="1" class="btn btn-primary">Details</a>
                <a asp-page="./Delete" asp-route-id="1" class="btn btn-danger">Delete</a>
            </div>
        </div>
    }
</div>
<div>
    <a asp-page="./Edit" asp-route-id="1" class="btn btn-primary">Edit</a>
    <a asp-page="./Details" asp-route-id="1" class="btn btn-primary">Details</a>
    <a asp-page="./Delete" asp-route-id="1" class="btn btn-danger">Delete</a>
</div>

As shown in the image, the buttons behave differently in different places even though they shouldn’t.

I tried modify classes and move them around but I can’t find the source of the problem.