Jak wyświetlić pod zdjęciem 2 przyciski, każdy zajmujący 50 % szerokości zdjęcia ?

Cześć! Mam problem z boostrapem. Chcę aby zdjęcie zajmowało cały wiersz czyli, col-xl-12, a pod zdjęciem znajdowały się 2 przyciski. Każdy z nich zajmuje po pół szerokości zdjęcia, wiec powinno być col-xl-6, ale niestety, przyciski znajdują się po lewej stronie i zajmują co najwyżej 2 kolumny. Gdzie może być problem ? Moim zdaniem tag formularza, mógł tu namieszać, ale nie wiem jak to rozwiązać

<article>
<div class="container bg-dark">
    <div class="row">
        <div class="col-xl-12 bg-success">
            <img src="avatar.jpg">
        </div>
            <form>
            <div class="row">
                <div class="col-xl-6 bg-danger">
            <button>DISLIKE</button>
                </div>
                <div class="col-xl-6 bg-primary">
                    <button>LIKE</button>
            </div>
        </div>
            </form>
    </div>
</div>
</article>