snap44

У вас подключен только файл сетки, в нем не описывается цвет кнопок. Подключите bootstrap.css

Это лишь малая часть того, что нужно уметь.

И никто до сих пор не спросил что там в коде и как он должен отрабатывать не отрисованную страницу?

Подробнее всего рассказывается в спецификациях.

https://codepen.io/anon/pen/yxydEx

Расскажите коллеге про preventDefault

С вашей разметкой - никак.

Сделать по 2 карточки?

Как выше уже сказали – не изобретайте велосипед.
Говорю не как верстальщик, а как пользователь: кулак перетаскивает, лупа с плюсиком увеличивает, кулак с оттопыренным указательным пальцем клацает. Все остальное от лукавого. И я еще более-менее продвинутый пользователь. Для среднестатистического любой курсор тупо клацает.

youtube

Sam Hampton-Smith - Pro CSS3 Layout Techniques – хорошая, но она только на английском. А вообще если какие-то знания есть, а верстать не получается, очередная книга вряд ли поможет.
Попробуйте это, потом это и наконец это.

спрятать можно так . А новый курсор на js добавлять после текстового узла. По идее должно сработать.

примерно так, только с фотошопами всякими еще придется поработать.

Вот это
input:valid~label
Замените на это
input:valid:not(:empty)~label
jsfiddle.net/6ks0gem1/7

Там же всё написано:

элемент divне разрешен как дочерний элемент ul

Тоже самое написано в спецификации

Content model:
Zero or more li and script-supporting elements.

flex-grow странный. Так ли это?

Попробуйте сделать таблицу в таблице. Внешняя таблица - это шапка и столбец + объединенные ячейки, внутри которых вторая таблица с оверфлоу:скролл

Как-то так. С высотой надо додумать что-то

body {display: flex;
	flex-direction: column;
	min-height: 100vh;}
.main {flex: 1;}

Но что-то мне подсказывает что так у вас возникнет еще больше вопросов. Найдите эту книгу

UPD: и забудьте про jquery пока не научитесь верстать.