dicem

body {
  background-color: *какой хош цвет*;
}

Как вам такой вариант?
https://jsfiddle.net/mnuz9Loo/

Как нибудь так?


Тут можешь поиграться
ds-overdesign.com/transform/matrix3d.html
Значения depth крути

.blue-circle, .red-circle, .green-circle, .orange-circle {
  height: auto;
  position: relative;
}
.circle-txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

Мужик, у тебя все на бутстрапе, якой грид, флекс. Используй сетку.
где у тебя .card элементы .col-lg-4 там где таблица .col-lg-8
https://jsfiddle.net/DiceMasters/b2mpcand/

Очень советую вам подтянуть вам js и посмотреть в сторону популярных фреймворков Vue, React, Angular. Ваш случай разбирается в разделе маршрутизации.
Сразу скажу, что брать информацию с txt не получится, нативное js не позволяет вам читать файлы с компьютера. Для хранения информации используются базы данных. Для управления данными на сервере можете использовать PHP + SQL. Однако, если же вы прислушаетесь к первому совету, я посоветую вам на MongoDB. Управление данными с помощью MongoDB разбирается во многих бесплатных статьях и уроках, уверен, как разберетесь с JavaScript вам не составит труда разобраться с MongoDB.
PS
Если вы все же хотите просто поэкспериментировать, то посмотрите на javascript плагины для создания табов. Например:
https://www.w3schools.com/howto/howto_js_tabs.asp

.box1 {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 50%;
	height: 50%;
	top:0;left:0;bottom:0;right:0;
	margin:auto;
	border:1px solid #333333;

}

.box2 {
	width: 120%;
	height: 120%;
	flex-shrink: 0;
	background: blue;
	opacity:0.5;
}

Извини, а зачем тут вобще bootstrap?
На родительский блок:

display: flex;
justify-content: space-between;
align-items: center;

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

Нате вам, у меня сегодня нормасное настроение

Используйте Swiper и его Swiper Thumbs

Во первых у вас там сетка стоит в 9 колонок, поставьте 12.

То есть чтоб стоял класс col-md-12, скорей всего в настройках темы может быть такая надстройка.

Во вторых избавьтесь от этого недоразумения:

Вам нафиг не нужно отображать блок как таблицу.

В третьих добавьте к отмеченному классу, отмеченные соответственно свойства.

display: flex;
justify-content: center