Ankhena

background-position

display: flex;
flex-direction: column;
flex-wrap: wrap;

Я думал, что раз у правого flex-shrink-1, то это значит, что он будет сжиматься один, пока не сожмется полностью, а потом уже будут сжиматься как обычно остальные.

Если бы у остальных был 0, то примерно так и было бы. Но только они не стали бы сжиматься меньше минимальной ширины, если указана.
Но у них тоже 1.

Вы добавили просто тег form на страницу. У формы должен быть обработчик, некий скрипт, который получает данные из формы, что-то с ними делает и возвращает результат.
Бутстрап, не в курсе не только о том, что и среди чего нужно искать, но и вообще что это поиск.

Абсолютным позиционированием.
https://jsfiddle.net/Louf1zbt/

Затемнение: псевдоэлемент с rgba(0,0,0,0.5) или сколько вам нужно.
Увеличение: transform: scale(1.2) или сколько вам нужно.

Как именно сделано на иви можно посмотреть через инструменты разработчика в любом адекватном браузере.

https://webref.ru/css/box-sizing поменяйте на border-box
либо border на outline или тень

Примерно так: https://jsfiddle.net/w95gy0uh/
Поскольку, высота фото одинакова и известна, то градиентом.
https://html5book.ru/css3-gradient/

Так задайте нужному классу зеленый фон

dropdown-item:hover {
background-color: green;
}

.dropdown-item.active, .dropdown-item:active {
background-color: green;
}

display: flex;
align-items: flex-end;
justify-content: center;

https://jsfiddle.net/fs6qkb0c/

1. javascript, или jquery не отвечают за расположение окна, за это отвечает CSS
2. Прочитать что такое Модальное окно
3. Реализация https://jsfiddle.net/s2w8spLt/
Можно обойтись без js|jq и сделать на CSS.

https://jsfiddle.net/s88zmam8/

https://jsfiddle.net/ffLLb5vh/

прописываю position: fixed то они начинают позиционироваться не относительно своего родителя, а относительно всего окна браузера, почему так?

Потому что спецификация.
https://webref.ru/css/position

Вывод: не использовать position: fixed
Использовать absolute и relative родителю.

Размер background: https://webref.ru/css/background-size
Пропорции блока: https://jsfiddle.net/Ankhena/cLhxv7eq/

Двойным фоном: нижний слой обычный градиент, второй круговой белый-прозрачный-белый

https://jsfiddle.net/oeyu8s50/
цвета и точки перехода градиента поставьте сколько нужно

Высота задается свойствами height, min-height, max-height.

Для дальнейшего обсуждения понадобится ссылка на сайт или https://jsfiddle.net/

Посмотрите пример: https://jsfiddle.net/ddc5e6wy/
Изменяйте ширину поля с результатом и смотрите где оказывается серый блок при разной ширине в обоих случаях.
Все поймете.

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

Можете посмотреть в сторону display:flex, может быть это решит вашу задачу. Или опишите ее конкретнее.