Recently, I decided to delve into the world of CSS and Bootstrap. I came across an interesting example that I'm trying to implement in my project. You can find the example here.
Here's the HTML code snippet:
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-6">
<div class="card">
<div class="header">
<h2><strong>New</strong> Friends <small>Add new friend in last month</small></h2>
</div>
<div class="body">
<ul class="new_friend_list list-unstyled row">
<li class="col-lg-4 col-md-2 col-sm-6 col-4">
<a href="">
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" class="img-thumbnail" alt="User Image">
<h6 class="users_name">Jackson</h6>
<small class="join_date">Today</small>
</a>
</li>
...
</ul>
</div>
</div>
</div>
...
</div>
</div>
And here's the CSS code snippet:
body{
...
}
.card {
...
}
...
a {
...
}
I'm looking to update the layout so that each row contains 5 data elements instead of 3. I've attempted using column-count but haven't had much luck. Any guidance on how to achieve this would be greatly appreciated!
Thank you!