tyzberd

в 3 версии bootstrap нет флексов, вот меню Justified https://getbootstrap.com/docs/3.4/components/#nav-...
там сделано с помощью

.nav-justified>li {
    display: table-cell;
    width: 1%;
}

У вас сначала лейзилоад вставляет картинку 1*1 в base64, она растягивается до ширины контента 369 и так как она квадратная, то высота тоже 369.
https://habrastorage.org/webt/jr/gf/y_/jrgfy_wbxzq...
Потом подгружается нормальная картинка, у нее уже другие пропорции и меняется высота.
Прописывайте какой то max-height картинке

https://popper.js.org/

https://codepen.io/himalayasingh/pen/pxKKgd
https://codepen.io/miniven/pen/ZJydge
без js это еще те костыли

сделайте ширину 100% и добавьте padding. У вас ширина 93% от целого числа ширины экрана, поэтому иногда получаются дробные значения.

.slider {
    width: 100%;
    padding: 0 30px;
    margin: 0 auto;
}

потом поправьте стрелочки right, left

для левого добавить flex-shrink: 0;

там есть ytp-cued-thumbnail-overlay-image и картинки
первое видео https://i.ytimg.com/vi/lfWDnyxt4bo/maxresdefault.jpg
второе https://i.ytimg.com/vi/lfWDnyxt4bo/default.jpg

https://jsfiddle.net/yhd019qm/3/

https://codepen.io/quinlo/pen/ReMRXz
https://freefrontend.com/css-checkboxes/

https://caniuse.com/#feat=css-gradients
https://autoprefixer.github.io/ru/
https://www.colorzilla.com/gradient-editor/

поставьте тут вместо запятой ;
btn = $('.open-modal'),

https://css-tricks.com/snippets/htaccess/force-fil...
https://stackoverflow.com/questions/30234821/htacc...
https://stackoverflow.com/questions/9997200/force-...

дейтпикер обрезается, потому что у iframe скрипт проставляет высоту без учета открытого дейтпикера.
Вообще да, поставщик не сделал.

используйте popover https://getbootstrap.com/docs/4.3/components/popovers/ который будет генерироваться перед закрывающимся тегом body и на js показываться в нужном месте. Там можно указать где генерировать, можно сделать перед вашим .content.
Эта библиотека есть отдельно от bootstrap