Тут есть несколько вариантов решения (как минимум два), вариант с помощью css:
1. каждой колонке присваиваете выравнивание текста по центру text-align: center;
2. в примере снизу не совсем удачно, что текст, но у вас судя по всему фиксированный контент с иконками и проблем быть не должно. на колонки назначаете padding: ?vw 0 ?vw 0;. на месте вопросов ставите значения подобранные методом научного тыка :) (в плане подбираете чтобы изображение центрировалось, в браузере это делается без проблем)
3. при необходимости на некоторых разрешениях с помощью @media запросов корректируете эти padding.
<div style="background: red;">
<div class="col-md-6 col-sm-6 col-xs-6" style="background: aqua; text-align: center; padding: 1vw 0 1vw 0;">В bootstrap стоят две колонки col-xs-6, но как сделать что бы высота менялась пропорционально</div>
<div class="col-md-6 col-sm-6 col-xs-6" style="background: aquamarine; text-align: center;padding: 1vw 0 1vw 0;">В bootstrap стоят две колонки col-xs-6, но как сделать что бы высота менялась пропорционально</div>
<div class="col-md-6 col-sm-6 col-xs-6" style="background: beige; text-align: center;padding: 1vw 0 1vw 0;">В bootstrap стоят две колонки col-xs-6, но как сделать что бы высота менялась пропорционально</div>
<div class="col-md-6 col-sm-6 col-xs-6" style="background: blueviolet; text-align: center;padding: 1vw 0 1vw 0;">В bootstrap стоят две колонки col-xs-6, но как сделать что бы высота менялась пропорционально</div>
<div class="col-md-6 col-sm-6 col-xs-6" style="background: aquamarine; text-align: center;padding: 1vw 0 1vw 0;">В bootstrap стоят две колонки col-xs-6, но как сделать что бы высота менялась пропорционально</div>
<div class="col-md-6 col-sm-6 col-xs-6" style="background: cyan; text-align: center;padding: 1vw 0 1vw 0;">В bootstrap стоят две колонки col-xs-6, но как сделать что бы высота менялась пропорционально</div>
второй метод завязан на jQuery, но он сложнее и топорнее. при необходимости могу потом примерно описать логику