I am new to css and bootsrap and am trying to use the code from this example:
https://www.bootdey.com/snippets/view/bs4-new-friends-panel
HTML:
<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>
<li class="col-lg-4 col-md-2 col-sm-6 col-4">
<a href="">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" class="img-thumbnail" alt="User Image">
<h6 class="users_name">Aubrey</h6>
<small class="join_date">Yesterday</small>
</a>
</li>
<li class="col-lg-4 col-md-2 col-sm-6 col-4">
<a href="">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" class="img-thumbnail" alt="User Image">
<h6 class="users_name">Oliver</h6>
<small class="join_date">08 Nov</small>
</a>
</li>
<li class="col-lg-4 col-md-2 col-sm-6 col-4">
<a href="">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="img-thumbnail" alt="User Image">
<h6 class="users_name">Isabella</h6>
<small class="join_date">12 Dec</small>
</a>
</li>
<li class="col-lg-4 col-md-2 col-sm-6 col-4">
<a href="">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="img-thumbnail" alt="User Image">
<h6 class="users_name">Jacob</h6>
<small class="join_date">12 Dec</small>
</a>
</li>
<li class="col-lg-4 col-md-2 col-sm-6 col-4">
<a href="">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="img-thumbnail" alt="User Image">
<h6 class="users_name">Matthew</h6>
<small class="join_date">17 Dec</small>
</a>
</li>
</ul>
</div>
</div>
</div>
<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>
<li class="col-lg-4 col-md-2 col-sm-6 col-4">
<a href="">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" class="img-thumbnail" alt="User Image">
<h6 class="users_name">Aubrey</h6>
<small class="join_date">Yesterday</small>
</a>
</li>
<li class="col-lg-4 col-md-2 col-sm-6 col-4">
<a href="">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="img-thumbnail" alt="User Image">
<h6 class="users_name">Oliver</h6>
<small class="join_date">08 Nov</small>
</a>
</li>
<li class="col-lg-4 col-md-2 col-sm-6 col-4">
<a href="">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="img-thumbnail" alt="User Image">
<h6 class="users_name">Isabella</h6>
<small class="join_date">12 Dec</small>
</a>
</li>
<li class="col-lg-4 col-md-2 col-sm-6 col-4">
<a href="">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" class="img-thumbnail" alt="User Image">
<h6 class="users_name">Jacob</h6>
<small class="join_date">12 Dec</small>
</a>
</li>
<li class="col-lg-4 col-md-2 col-sm-6 col-4">
<a href="">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="img-thumbnail" alt="User Image">
<h6 class="users_name">Matthew</h6>
<small class="join_date">17 Dec</small>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS:
body{
margin-top:20px;
background-color: #f4f6f9;
}
.card {
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
background: #fff;
border-radius: .1875rem;
margin-bottom: 30px;
border: 0;
display: inline-block;
position: relative;
width: 100%;
box-shadow: none;
}
.card .header {
color: #424242;
padding: 20px;
position: relative;
box-shadow: none;
}
.card .header h2 {
color: #757575;
position: relative;
}
.card .header h2:before {
background: #6572b8;
}
.card .header h2 {
font-size: 15px;
}
.card .header h2::before {
position: absolute;
width: 2px;
height: 18px;
left: -20px;
top: 0;
content: '';
}
.theme-purple .card .header h2 strong {
color: #6572b8;
}
.card .header h2 small {
color: #9e9e9e;
line-height: 15px;
}
.card .body {
color: #424242;
font-weight: 400;
padding: 20px;
}
.new_friend_list {
margin-bottom: 0px;
}
.new_friend_list li .users_name {
color: #424242;
text-transform: capitalize;
}
.new_friend_list li .users_name {
margin-top: 5px;
}
.new_friend_list li .users_name{
margin-bottom: 0px;
}
.new_friend_list li .join_date {
color: #757575;
}
a {
outline: none !important;
color: #007bff;
text-decoration: none;
background-color: transparent;
}
I need to update it so that there are 5 data elements in each row instead of 3 as it is now. If anyone could help explain how to do that it would be appreciated!
I have tried column-count and it doesn't seem to work.
Thanks.
CodePudding user response：
This my first answer (excited)
First inspect the html and find the line of code below. Change the col-lg-4 for col-lg-2 on each <li> element.
The modification is for large screen only
Actual:
<li class="col-lg-4 col-md-2 col-sm-6 col-4"> <a href=""> <img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="img-thumbnail" alt="User Image"><h6 class="users_name">Matthew</h6> <small class="join_date">17 Dec</small> </a></li>
Modified:
<li class="col-lg-2 col-md-2 col-sm-6 col-4"> <a href=""> <img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="img-thumbnail" alt="User Image"><h6 class="users_name">Matthew</h6> <small class="join_date">17 Dec</small> </a></li>
For more understanding take a look at this page https://getbootstrap.com/docs/5.1/layout/grid/
Tschuss
CodePudding user response：
You should remove class col-lg-4 and replace it with class .w-20
Than in css, add class .w-20 like this:
.w-20 {
-webkit-box-flex: 0;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
Original, more detailed answer to the same question you can found here: