Left Align Badges - html

Question

I have created this card here in which i have some badges but they are not aligned in the right way i need to left align them like this image.. Can anyone help me in aligning these badges just like they are aligned in the second image? I am using bootstrap 3.3.7 and this just a little code snippet and i think this is enough information.
here is the html code.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-sm-6">
<div class="card main-content">
<div class="row clearfix" id="line">
<div class="col-sm-12">
<div class="header">
<h2>
Insights
</h2>
</div>
<div class="modal-body">
<div class="row clearfix">
<div class="col-sm-12" style="display: table;">
<div>
Total Students
<span class="badge badge-primary">
0
</span>
</div>
<br>
<div>
Subjects
<span class="badge badge-primary">
20
</span>
</div>
<br>
<div>
Sections
<span class="badge badge-primary">
289
</span>
</div>
<br>
<div>
Created On
<span class="badge">
27/8/2018
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

You can wrap your labels in a <span> tag and give it a min-width. This way, the badges will be horizontally left aligned and vertically on the same line:
.insight-label {
display: inline-block;
min-width: 120px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-6">
<div class="card main-content">
<div class="row clearfix" id="line">
<div class="col-sm-12">
<div class="header">
<h2>Insights</h2>
</div>
<div class="modal-body">
<div class="row clearfix">
<div class="col-sm-12" style="display: table;">
<div>
<span class="insight-label">Total Students</span>
<span class="badge badge-primary">0</span>
</div>
<br>
<div>
<span class="insight-label">Subjects</span>
<span class="badge badge-primary">20</span>
</div>
<br>
<div>
<span class="insight-label">Sections</span>
<span class="badge badge-primary">289</span>
</div>
<br>
<div>
<span class="insight-label">Created On</span>
<span class="badge">27/8/2018</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>