Павел

В бутстрапе row это строка, задача которой → выстроить в линию по горизонтали элементы. Для корректной работы необходимо внутри нее использовать сетку col-[количество колонок, базово от 1 до 12].

Поэтому решения 2:
1. Убрать row из оберток, оставив только container*.
2. Вложить между контентом и row один див с классом col-12*.

* — и в любом случае поубирай отрицательные маржины. Они тебе тот еще подарок преподнесут ибо.

Но лучше пойти в документацию и посмотреть примеры, если не можешь в английский. Край → поискать русскоязычную документацию, она обычно отстает, но сетки это из базовых функций.

С помощью только лишь Bootstrap это не сделать. Пишем свой CSS:

@media (max-width: 575px) {
    .alert--test {
        background-color: var(--primary);
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    .alert--test {
        background-color: var(--success);
    }
}

@media (min-width: 992px) and (max-width: 1999px) {
    .alert--test {
        background-color: var(--warning);
    }
}

@media (min-width: 1200px) {
    .alert--test {
        background-color: var(--danger);
    }
}

В вашем коде нужно убрать alert-primary col-xl-alert-danger и добавить уникальный класс, в моем случае это, например, alert--test.