Sticher78

Нормально ответил, чо.
Только тут разговор о 4-м бустрапе, и там всё по-другому, если чо.

hidden-md-up - показывается всё, что выше "md"-разрешения
hidden-md-down - скрывается всё, что выше "md"-разрешения

Вы что все такие беспомощные-то, а?
Самим-то погуглить сложно?

https://v4-alpha.getbootstrap.com/layout/responsiv...

используйте для блоков класс "text-center"

гуггли mapplic, может всё тобой указанное и чуть-чуть больше)

Пример:
https://www.mapplic.com/mall-map/?location=starbucks

https://onlinefontconverter.com/

Сконвертируй тут, он как раз запоротые шрифты восстанавливает, сам с этим сталкивался.

Если ни один веб-сервис не помог - имеет смысл первоначально пересохранить ttf-шрифт через программу Typelight и потом уже конвертить в них.

.wrapper задайте position:relative; overflow:hidden
.opacity_blue - display:block; top:0;left:0;height:100%

https://jsfiddle.net/1js2sep9/

на обычном бутстрап, с применением transition в стилях.

У них это сделано кастомно, с применением js-скриптов.

а текст в ней будет выравниваться по середине

и то не факт, при задании text-align:center он будет, к примеру, справа

На картинке ничего не понятно, уточняйте свой вопрос, что куда и как хотите разместить

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

Ну, и можно ещё подключить определение браузера (что не всегда корректно) - Каждому браузеру - свой CSS-файл

Погугли скрипты jquery.formstyler и jquery.selectbox, оба дают подобный эффект.
Выбирай, не за что

Внутренние отступы потому что, скорее всего, заданы, padding которые.

Upd:
"Еще такой эффект даёт inline-block" - имел ввиду, что при применении этого свойства, тоже не даёт уменьшить line-height.

display:block;
height:auto;

И выравнивай как тебе угодно.