Сергей Киселёв

Никакие системные настройки не нужны.
Создать компонент, в префикс засунуть статичную верстку - проверить, отображается ли слайдер.
Если показывается, создаете необходимые поля, раскидываете код верстки по префиксу и суффиксу, по поле с отображением объектом, и тупо подставляете в верстку объектов вывод этих самых полей

<div class="block">
    <div class="container">
        <div class="row">
            <div class="col-md-6 left"></div>
            <div class="col-md-6 right"></div>
        </div>
    </div>
</div>

.block {
  background-image: url('....');
}

В bootstrap4 есть классы d-block и d-none - вот вокруг них и строится скрытие блоков.

Я приведу несколько примеров, чтобы было понятно:

1) Чтобы скрыть блок только на sm используйте связку классов d-sm-none d-md-block - т.е вы явно скрываете блок на sm и делаете его видимым на md и выше (на xs блок так же будет виден)
2) Чтобы скрыть блок на xs используйте связку классов d-none d-sm-block - блок будет скрыт на xs и виден на всех остальных размерах

А вот всякие hidden-md-up и hidden-md-up, не смотря на кажущуюся удобность, были выпилены из бутстрапа4 после альфы.

В 4ой версии это класс .rounded-circle для картинки.
В 3ей - .img-circle

Представьте что за чушь в таблице творится создается новая запись и она под числом 256:

самая обычная чушь, на которую не стоит и вообще нельзя обращать внимания

идентификаторы нужны для связей и обращения к записям, а не для красоты. если ими рулить вручную можно запороть связи. если нужно для красоты, сделайте отдельное поле

"use strict";

    let quotes = document.querySelectorAll(".quotes");
    let rand = getRandomInt(quotes.length);

    for (let i = 0; i < rand; i++) {
      quotes[i].style.display = "block";
    }

    function getRandomInt(max) {
      return Math.floor(Math.random() * (max - 1) + 1);
    }

https://codepen.io/irawachaloco/pen/GJKLzy

В fill можно задавать не только цвет