<div class="container d-flex justify-content-center">
<ul class="list-group mt-5 text-white">
<li class="list-group-item d-flex justify-content-between align-content-center">
<div class="d-flex flex-row"> <img src="https://img.icons8.com/color/100/000000/folder-invoices.png" width="40" />
<div class="ml-2">
<h6 class="mb-0">Ogivet Maither</h6>
<div class="about"> <span>22 Files</span> <span>Jan 21, 2020</span> </div>
</div>
</div>
<div class="check"> <input type="checkbox" name="a"> </div>
</li>
<li class="list-group-item d-flex justify-content-between align-content-center">
<div class="d-flex flex-row"> <img src="https://img.icons8.com/color/100/000000/folder-invoices.png" width="40" />
<div class="ml-2">
<h6 class="mb-0">Macan Worldgroup</h6>
<div class="about"> <span>62 Files</span> <span>Jan 22, 2020</span> </div>
</div>
</div>
<div class="check"> <input type="checkbox" name="a"> </div>
</li>
<li class="list-group-item d-flex justify-content-between align-content-center">
<div class="d-flex flex-row"> <img src="https://img.icons8.com/color/100/000000/folder-invoices.png" width="40" />
<div class="ml-2">
<h6 class="mb-0">Organ parts</h6>
<div class="about"> <span>82 Files</span> <span>Jan 29, 2020</span> </div>
</div>
</div>
<div class="check"> <input type="checkbox" name="a"> </div>
</li>
<li class="list-group-item d-flex justify-content-between align-content-center">
<div class="d-flex flex-row"> <img src="https://img.icons8.com/color/100/000000/folder-invoices.png" width="40" />
<div class="ml-2">
<h6 class="mb-0">Engine parts</h6>
<div class="about"> <span>182 Files</span> <span>Jan 29, 2020</span> </div>
</div>
</div>
<div class="check"> <input type="checkbox" name="a"> </div>
</li>
<li class="list-group-item d-flex justify-content-between align-content-center">
<div class="d-flex flex-row"> <img src="https://img.icons8.com/color/100/000000/folder-invoices.png" width="40" />
<div class="ml-2">
<h6 class="mb-0">Turbine parts</h6>
<div class="about"> <span>802 Files</span> <span>Jan 29, 2020</span> </div>
</div>
</div>
<div class="check"> <input type="checkbox" name="a"> </div>
</li>
</ul>
</div>
body {
background: #4527A0
}
.list-group {
width: 400px !important
}
.list-group-item {
margin-top: 10px;
border-radius: none;
background: #5E35B1;
cursor: pointer;
transition: all 0.3s ease-in-out
}
.list-group-item:hover {
transform: scaleX(1.1)
}
.check {
opacity: 0;
transition: all 0.6s ease-in-out
}
.list-group-item:hover .check {
opacity: 1
}
.about span {
font-size: 12px;
margin-right: 10px
}
input[type=checkbox] {
position: relative;
cursor: pointer
}
input[type=checkbox]:before {
content: "";
display: block;
position: absolute;
width: 20px;
height: 20px;
top: 0px;
left: 0;
border: 1px solid #10a3f9;
border-radius: 3px;
background-color: white
}
input[type=checkbox]:checked:after {
content: "";
display: block;
width: 7px;
height: 12px;
border: solid #007bff;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 2px;
left: 6px
}
input[type="checkbox"]:checked+.check {
opacity: 1
}