Aligning Text and Icon in the center of box in Bootstrap - html

Question

I am trying to align the text and icons, which are in a box, to the center of it. I want it centered like this:
I tried the following:
adding align-content: center and justify-content: center as an inline style in the div tag for row, but no luck. Any helps or leads are appreciated. I have provided a jsfiddle link to show you what I have now. As of now, all the content is left.
https://jsfiddle.net/silosc/76ktyveu/4/
<div class="row" style="width:100%">
<div class="report-card-i report-card-i-height">
<h3 class="m-l-35 p-t-25 p-b-10">Stats</h3>
<div class="fa-orange m-t-10 m-b-15">
<div class="row">
<div class="col-sm-3 col-xs-3">
<i class="fa fa-star m-r-15">Stat1</i>
</div>
<div class="col-sm-2 col-xs-3">
<i class="fa fa-angle-right"></i>
</div>
</div>
<br />
<div class="row">
<div class="col-sm-3 col-xs-3">
<i class="fa fa-star m-r-15">Stat2</i>
</div>
<div class="col-sm-2 col-xs-3">
<i class="fa fa-angle-right"></i>
</div>
</div>
<br />
<div class="row">
<div class="col-sm-3 col-xs-3">
<i class="fa fa-star m-r-15">Stat3</i>
</div>
<div class="col-sm-2 col-xs-3">
<i class="fa fa-angle-right"></i>
</div>
</div>
</div>
</div>
</div>
<style>
.report-card-i{
background: orange;
box-shadow: 2px 2px 10px 4px rgba(0, 0, 0, 0.2);
position: relative;
margin-top: 30px;
}
.report-card-i-height {
min-height: 280px;
height: auto;
width: 100%;
}
.report-name {
font-family: Questrial;
font-weight: bold;
color: #f0522f !important;
}
</style>

Answer 1

Since you are using bootstrap you can use the text-left class. Also a lot of your bootstrap margins and padding classes are set wrong... margins are mr-1 to mr-5. Same format for paddings
.report-card-i {
background: orange;
box-shadow: 2px 2px 10px 4px rgba(0, 0, 0, 0.2);
position: relative;
margin-top: 30px;
}
.report-card-i-height {
min-height: 280px;
height: auto;
width: 100%;
}
.report-name {
font-family: Questrial;
font-weight: bold;
color: #f0522f !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" style="width:100%">
<div class="report-card-i report-card-i-height">
<h3 class="ml-5 pt-5 pb-2">Stats</h3>
<div class="fa-orange mt-5 mb-5">
<div class="row">
<div class="col-sm-3 col-xs-3 text-center">
<i class="fa fa-star">Stat1</i>
</div>
<div class="col-sm-2 col-xs-3">
<i class="fa fa-angle-right"></i>
</div>
</div>
<br />
<div class="row">
<div class="col-sm-3 col-xs-3 text-center">
<i class="fa fa-star m-r-15">Stat2</i>
</div>
<div class="col-sm-2 col-xs-3">
<i class="fa fa-angle-right"></i>
</div>
</div>
<br />
<div class="row">
<div class="col-sm-3 col-xs-3 text-center">
<i class="fa fa-star m-r-15">Stat3</i>
</div>
<div class="col-sm-2 col-xs-3">
<i class="fa fa-angle-right"></i>
</div>
</div>
</div>
</div>
</div>

Answer 2

Try this: .fa { margin-left: 50%; transform: translateX(-50%); },
and if you want space between the icon and the text then try: .fa-star:before { padding-right: 20px; }