I'm currently struggling to center some text. Here is how my text is currently formatted:
<div class="panel panel-default" ng-repeat="criteria in controller.productCriteria">
<div class="panel-heading">
<div class="row flex">
<div class="col-xs-3 flex flex-column flex-center"><strong>{{ criteria.name }}</strong></div>
<div class="col-xs-9 text-center">
<div class="row">
<div class="col-xs-3" ng-repeat="attribute in criteria.attributes">
<div class="option" ng-class="{ 'active': attribute.active }">
<div class="point"></div>
<span class="small">{{ attribute.name }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
A solution I found here successfully centered the text, but it also increased the size of the columns causing them to wrap onto a new line.
Here is an example showcasing the issue: https://codepen.io/r3plica/pen/pwLOKW
If anyone has any suggestions or can help me resolve this problem, I would greatly appreciate it!