Ensure that when adding a col class, you also include the colspan attribute. For example, if you have a col-2 and a col class inside your .row.inbox-item, the total should add up to 12 when all classes are combined on the same level. Therefore, if you have two divs as in the provided example, allocate the remaining 10 after the first .col-2 div to the other div and change .col to .col-10.
The same rule applies for other instances where columns are missing. For instance, "col inbox-item-title" should be corrected to "col-8 inbox-item-title" since there is already a col-4 present at the same level.
I have tested your code, and you need to adjust the col class following the col-2 class div to col-10 in order to make it functional.
Here is how the corrected code should look:
<div class="row inbox-item">
<div class="col-2 inbox-item-display-picture align-self-center">
<img src="https://cdn3.iconfinder.com/data/icons/business-round-flat-vol-1-1/36/user_account_profile_avatar_person_student_male-512.png">
</div>
<div class="col-10">
<div class="row">
<div class="col-8 inbox-item-title">
<span>Chat #10</span>
</div>
<div class="col-4 inbox-item-timestamp">
8:48 AM
</div>
</div>
<div class="row">
<div class="col-10 inbox-item-message">
<span class="inbox-item-sender">Person 1:</span> Hello, how are you?
</div>
<div class="col-2 inbox-item-unreadcount">
<span class="badge badge-pill badge-secondary">2</span>
</div>
</div>
</div>
</div>