Как сделать нормальный список в bootstrap?

Question

[NofriOne]

Как сделать такой список, как на первом рисунке. Необходим display: block?

<ul class="list">
    <li>
        <img class="listphoto listposition" src="assets/img/avatar-fat.jpg">
        <div class="listposition">
            <strong>Jacob Thornton</strong>
            <p>@fat - San Francisco</p>
        </div>
        <button type="button" class="listbutton">Follow</button>
    </li>
    <li>
        <img class="listphoto listposition" src="assets/img/avatar-fat.jpg">
        <div class="listposition">
            <strong>Jacob Thornton</strong>
            <p>@fat - San Francisco</p>
        </div>
        <button type="button" class="listbutton">Follow</button>
    </li>
</ul>

.list {
	list-style-type: none;
	padding: 15px;
	margin: 0px;
	font-size: 14px;
	border-bottom: 1px solid #dee2e6;
}
.listphoto {
	border-radius: 50%;
	width: 42px;
	height: 42px;
	margin-right: 14px;
}
.listposition {
	float: left;
}
.listbutton {
	background-color: #D4DBE0;
	float: right;
	padding: 0.25rem 0.5rem;
	font-size: 12px;
	border: 1px solid;
	border-color: #D4DBE0;
	border-radius: 0.25rem;
	 
}
.listbutton:focus {
	outline-color: #D4DBE0;


}
.listbutton:hover {
	background-color: #bec8d0;
}
.listbutton:active {
	background-color: #b0b7bd;
}