How to achieve this layout properly? - css

Question

I want to have list items with a layout like below, with a circle that has an image, at right of the circle a title, the date of the post and then the category of the post. And at right of the list item should appear the button.
I have this code to achieve this layout using flexbox: http://jsfiddle.net/muLh5v4n/2/. But its not working properly, the title, post date and category are not at the right of the image, are below the image.
HTML:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bg-custom-gray-dark">
<div class="container py-5">
<div class="row">
<div class="col">
<ul class="list-group list">
<li class="list-group-item bg-custom-light2 py-4">
<div class="row align-items-center">
<form class="col-5">
<div class="form-group">
<div class="input-group list_search">
<div class="input-group-prepend">
<span class="input-group-text search-icon"><i class="fa fa-search"></i></span>
</div>
<input type="text" class="form-control shadow-none search-input p-0" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Search...">
</div>
</div>
</form>
<div class="col-7 text-right">
<div class="dropdown filters mr-3">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 2 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
<div class="dropdown filters">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter2 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item d-flex align-items-center">
<div class="post-info">
<img src="http://placehold.jp/3d4070/ffffff/75x75.png?css=%7B%22border-radius%22%3A%2215px%22%7D">
<h3>Title of the post</h3>
<span>post date</span>
<span>Categorqy of the post</span>
</div>
<div class="post-button ml-auto">
<button>Read</button>
</div>
</li>
<li class="list-group-item">item2</li>
<li class="list-group-item">item3</li>
<li class="list-group-item">...</li>
</ul>
</div>
</div>
</div>
</div>

Answer 1

This is another aproach.
ul {
list-style-type: none;
width: 500px;
border: 1px solid gray;
margin: 0;
padding: 0;
}
.picture_round{
border-radius: 50%;
width: 50px;
height: 50px;
margin-right: 10px;
margin-left: 20px;
object-fit: cover;
object-position: center;
display: block;
}
.dsp_flex {
display: flex;
justify-content: center;
align-items: center;
}
.middle_section{
flex: 1;
text-align: left;
}
ul li button{
margin-right: 20px;
}
ul li{
padding: 10px 0px;
border-bottom: 1px solid blue;
}
.title {
text-transform: uppercase;
font-weight: bolder;
}
.category{
border: 1px solid gray;
border-radius: 10px;
display: inline-block;
padding: 5px 2px;
}
<ul>
<li>
<div class="dsp_flex">
<img src="https://ph-test-11.slatic.net/p/4/yd-m6-kids-electric-ride-on-toy-car-4-wheels-red-6663-9385349-68cc46bb43f6fc801db86e9994dd6dba-catalog.jpg_340x340q80.jpg_.webp" class="picture_round">
<div class="middle_section">
<div class="title">title</div>
<div class="description">lorem ipsum ipsum</div>
<div class="category"> category </div>
</div>
<button>Button</button>
</div>
</li>
<li>
<div class="dsp_flex">
<img src="https://ph-test-11.slatic.net/p/4/yd-m6-kids-electric-ride-on-toy-car-4-wheels-red-6663-9385349-68cc46bb43f6fc801db86e9994dd6dba-catalog.jpg_340x340q80.jpg_.webp" class="picture_round">
<div class="middle_section">
<div class="title">title</div>
<div class="description">lorem ipsum ipsum</div>
<div class="category"> category </div>
</div>
<button>Button</button>
</div>
</li>
<li>
<div class="dsp_flex">
<img src="https://ph-test-11.slatic.net/p/4/yd-m6-kids-electric-ride-on-toy-car-4-wheels-red-6663-9385349-68cc46bb43f6fc801db86e9994dd6dba-catalog.jpg_340x340q80.jpg_.webp" class="picture_round">
<div class="middle_section">
<div class="title">titletitle title</div>
<div class="description">lorem ipsum ipsum lorem ipsum ipsum</div>
<div class="category"> categorycategory </div>
</div>
<button>Button</button>
</div>
</li>
</ul>

Answer 2

You can try using this; you can further style the elements; but basically this component should display as you intend. Also this is using only Bootstrap Classes, custom css is only for the example.
.list-item {
max-width: 450px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="list-item border d-flex align-items-center">
<div><img src="https://via.placeholder.com/100" class="rounded-circle" alt=""></div>
<div class="ml-2">
<h3>Title</h3>
<p>some-text</p>
<span>Span</span>
</div>
<div class="ml-auto mr-2"><button>Button</button></div>
</div>

Answer 3

Bootstrap 4 has a class called .flex-row that we can use.
Lets do this using only Bootstrap classes and flex.
1. Add flex-row class to the list-group-item.
2. Add d-flex to post-info.
3. Place the text into a d-flex flex-column div.
<li class="list-group-item d-flex flex-row align-items-center">
<div class="post-info d-flex">
<img src="http://placehold.jp/3d4070/ffffff/75x75.png?css=%7B%22border-radius%22%3A%2215px%22%7D">
<div class="d-flex flex-column">
<h3>Title of the post</h3>
<span>post date</span>
<span>Categorqy of the post</span>
</div>
</div>
<div class="post-button ml-auto">
<button>Read</button>
</div>
JSFiddle: http://jsfiddle.net/muLh5v4n/13/
You can later on use Bootstraps built in padding classes to make it space out nicely.