"list-view-card"
Bootstrap 4.1.1 Snippet by nileshkardate

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://www.applykaroo.com/css/style.css"> <div class="container"> <header id="fh5co-header-section" class="sticky-banner"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <div class="container"> <div class="nav-header pyro"><div class="before"></div> <div class="after"></div> <a href="javascript:void();" class="js-fh5co-nav-toggle fh5co-nav-toggle dark"><i></i></a> <a href="/" id=""><img src="https://www.applykaroo.com/images/applylogo.png" alt="logo"></a> <nav id="fh5co-menu-wrap" role="navigation"> <ul class="sf-menu" id="fh5co-primary-menu"> <li class=""><a href="/">Home</a></li> <li><a href="credit-cards">Credit Cards</a></li> <li><a href="insurances">Insurances</a></li> <li><a href="loans">Loans</a></li> <li> <a href="/register.php" class="fh5co-sub-ddown"> Register </a> </li> </ul> </nav> </div> </div> </header> <div class="card container link-template-tabcard maindiv" style="width:100%;background-color:#313131;margin: 20px auto;"> <div class=" d-flex justify-content-between align-items-center" id="maindiv"> <div class="col-md-3"> <h3 class="package-title" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 18px;margin-top: 10px;color:white;"> Payment History </h3> </div> <div class="col-md-3"> <h3 class="package-title" style="color:gray;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color:white;font-size: 16px;margin-top: 10px">Total Account </h3> </div> <div class="col-md-3"> <h3 class="package-title" style="color:gray;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color:white;font-size: 16px;margin-top: 10px"> Credit Utilization</h3> </div> <div class="col-md-3"> <h3 class="package-title" style="color:gray;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 16px;margin-top: 10px;color:white;"> Credit Enquiries</h3> </div> </div> </div> <div class="card container link-template-tabcard maindiv" style="width:100%;margin: 20px auto;"> <div class=" d-flex justify-content-between align-items-center" id="maindiv"> <div class="col-md-12"> <h2 class="package-title" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-top: 10px"> <img src="https://creditreport.paisabazaar.com/images/clock_blue.svg" height="20";/> Your Payment History is Excellent <sup> <b class="package-title" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 20px;margin-top: 10px;color:#72bc44;"> (100 % Payment on-time )</b></sup> </h2> </div> </div> <hr> <div class="card-body p-0"> <div class="d-flex justify-content-between align-items-center"> <div class="card-header text-center col-sm-12"> <a style="color:blue;" href="#" title="Know more about Payment History"> <img src="https://creditreport.paisabazaar.com/images/dark_blue_info_icon.svg"> Know more about Payment History </a> </div> </div> </div> </div> <h3 class="text-left" style="color:#d92067;font-weight:700"> <img src="https://creditreport.paisabazaar.com/images/graph_v3.svg" style="height:20px"> Credit Cards You Have </h3> <div class="card container link-template-tabcard maindiv" style="width:100%;margin: 20px auto;"> <div class=" d-flex justify-content-between align-items-center" id="maindiv"> <div class="col-md-3"> <h3 class="package-title" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;margin-top: 10px"> <img src="https://creditreport.paisabazaar.com/images/bank_logos/axis.png" height="20";/> Axis Bank</h3> <small class="package-title" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;margin-top: 10px"> Last Updated : 15 Mar 2022 </small> </div> <div class="col-md-3"> <h3 class="package-title" style="color:gray;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;margin-top: 10px">Account Number</h3> <h3 class="package-title" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;margin-top: 10px">XXXXXXX-4891</h3> </div> <div class="col-md-3"> <h3 class="package-title" style="color:gray;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;margin-top: 10px">On time Payments</h3> <h3 class="package-title" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;margin-top: 10px">XXXXXXX-4891</h3> </div> <div class="col-md-3"> <h3 class="package-title" style="color:gray;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;margin-top: 10px">Status</h3> <h3 class="package-title" style="color:green;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;margin-top: 10px"><b>Active </b></h3> </div> </div> <hr> <div class="card-body p-0"> <div class="tab-content"> <div class="tab-pane p-4 active" style="display:none;" id="calanderdiv" role="tabpanel"> <div id="tab-content"> <div class="row" id="desc"> <b style="border-bottom:3px solid #000;">2022</b></div> <div class="row" id="desc"> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;border-right:2px solid white">January </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">Februry </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">March </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">April </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">May </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">June </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">July </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">Augst </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">Septem </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">October </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">Novmbe </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">Decemb </div> </div> </div> <hr> <div id="tab-content"> <div class="row" id="desc"> <b style="border-bottom:3px solid #000;">2023</b></div> <div class="row" id="desc"> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;border-right:2px solid white">January </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">Februry </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">March </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">April </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">May </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">June </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">July </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">Augst </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">Septem </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">October </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">Novmbe </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">Decemb </div> </div> </div> <hr> <div id="tab-content"> <div class="row" id="desc"> <b style="border-bottom:3px solid #000;">2024</b></div> <div class="row" id="desc"> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;border-right:2px solid white">January </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">Februry </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">March </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">April </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">May </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">June </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">July </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">Augst </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">Septem </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">October </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">Novmbe </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">Decemb </div> </div> </div> </div> </div> <div class="d-flex justify-content-between align-items-center"> <div class="card-header text-center col-sm-6"> <a style="color:blue;" href="#" onclick="calanderdiv()"> View details</a> </div> <div class="col-sm-6 text-center"> <a style="color:blue;" href="#"> Update Card ? </a> </div> </div> </div> </div> <div class="card container link-template-tabcard maindiv" style="width:100%;margin: 20px auto;"> <div class="d-flex justify-content-between align-items-center" id="maindiv"> <div class="col-md-3"> <h3 class="package-title" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;margin-top: 10px"> <img src="https://creditreport.paisabazaar.com/images/bank_logos/hdfc.png" height="20";/> Hdfc Bank</h3> <small class="package-title" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;margin-top: 10px"> Last Updated : 15 Mar 2022 </small> </div> <div class="col-md-3"> <h3 class="package-title" style="color:gray;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;margin-top: 10px">Account Number</h3> <h3 class="package-title" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;margin-top: 10px">XXXXXXX-4891</h3> </div> <div class="col-md-3"> <h3 class="package-title" style="color:gray;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;margin-top: 10px">On time Payments</h3> <h3 class="package-title" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;margin-top: 10px">XXXXXXX-4891</h3> </div> <div class="col-md-3"> <h3 class="package-title" style="color:gray;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;margin-top: 10px">Status</h3> <h3 class="package-title" style="color:green;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;margin-top: 10px">Active</h3> </div> </div> <hr> <div class="card-body p-0"> <div class="tab-content"> <div class="tab-pane p-4 active" style="display:none;" id="calanderdiv" role="tabpanel"> <div id="tab-content"> <div class="row" id="desc"> <b style="border-bottom:3px solid #000;">2022</b></div> <div class="row" id="desc"> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;border-right:2px solid white">January </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">Februry </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">March </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">April </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">May </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">June </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">July </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">Augst </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">Septem </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">October </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">Novmbe </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">Decemb </div> </div> </div> <hr> <div id="tab-content"> <div class="row" id="desc"> <b style="border-bottom:3px solid #000;">2023</b></div> <div class="row" id="desc"> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;border-right:2px solid white">January </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">Februry </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">March </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">April </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">May </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">June </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">July </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">Augst </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">Septem </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">October </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">Novmbe </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">Decemb </div> </div> </div> <hr> <div id="tab-content"> <div class="row" id="desc"> <b style="border-bottom:3px solid #000;">2024</b></div> <div class="row" id="desc"> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;border-right:2px solid white">January </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">Februry </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">March </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">April </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">May </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">June </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">July </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">Augst </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">Septem </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">October </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">Novmbe </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">Decemb </div> </div> </div> </div> </div> <div class="d-flex justify-content-between align-items-center"> <div class="card-header text-center col-sm-6"> <a style="color:blue;" href="#" onclick="calanderdiv()"> View details</a> </div> <div class="col-sm-6 text-center"> <a style="color:blue;" href="#"> Update Card ? </a> </div> </div> </div> </div> <div class="card container link-template-tabcard maindiv" style="width:100%;height:100px;background:linear-gradient(90deg, rgba(136,213,196,1) 0%, rgba(136,213,62,1) 100%);margin: 20px auto;"> <div class=" d-flex justify-content-between align-items-center" id="maindiv"> <div class="col-md-3"> <img src="https://www.applykaroo.com/assets/images/metersml.png"/> </div> <div class="col-md-9"> </div> </div> </div> <h3 class="text-left" style="color:#d92067;font-weight:700"> <img src="https://creditreport.paisabazaar.com/images/graph_v3.svg" style="height:20px"> Loans You Ove </h3> <div class="card container link-template-tabcard maindiv" style="width:100%;margin: 20px auto;"> <div class=" d-flex justify-content-between align-items-center" id="maindiv"> <div class="col-md-3"> <h3 class="package-title" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;margin-top: 10px"> <img src="https://creditreport.paisabazaar.com/images/bank_logos/axis.png" height="20";/> Axis Bank</h3> <small class="package-title" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;margin-top: 10px"> Last Updated : 15 Mar 2022 </small> </div> <div class="col-md-3"> <h3 class="package-title" style="color:gray;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;margin-top: 10px">Account Number</h3> <h3 class="package-title" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;margin-top: 10px">XXXXXXX-4891</h3> </div> <div class="col-md-3"> <h3 class="package-title" style="color:gray;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;margin-top: 10px">On time Payments</h3> <h3 class="package-title" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;margin-top: 10px">XXXXXXX-4891</h3> </div> <div class="col-md-3"> <h3 class="package-title" style="color:gray;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;margin-top: 10px">Status</h3> <h3 class="package-title" style="color:green;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;margin-top: 10px"><b>Active </b></h3> </div> </div> <hr> <div class="card-body p-0"> <div class="tab-content"> <div class="tab-pane p-4 active" style="display:none;" id="calanderdiv" role="tabpanel"> <div id="tab-content"> <div class="row" id="desc"> <b style="border-bottom:3px solid #000;">2022</b></div> <div class="row" id="desc"> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;border-right:2px solid white">January </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">Februry </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">March </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">April </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">May </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">June </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">July </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">Augst </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">Septem </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">October </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">Novmbe </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">Decemb </div> </div> </div> <hr> <div id="tab-content"> <div class="row" id="desc"> <b style="border-bottom:3px solid #000;">2023</b></div> <div class="row" id="desc"> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;border-right:2px solid white">January </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">Februry </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">March </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">April </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">May </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">June </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">July </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">Augst </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">Septem </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">October </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">Novmbe </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">Decemb </div> </div> </div> <hr> <div id="tab-content"> <div class="row" id="desc"> <b style="border-bottom:3px solid #000;">2024</b></div> <div class="row" id="desc"> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;border-right:2px solid white">January </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">Februry </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">March </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">April </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">May </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">June </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">July </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">Augst </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">Septem </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">October </div> <div class="col-md-1" style="border-bottom:5px solid #72bc44;width:50%;">Novmbe </div> <div class="col-md-1" style="border-bottom:5px solid #e2211f;width:50%;">Decemb </div> </div> </div> </div> </div> <div class="d-flex justify-content-between align-items-center"> <div class="card-header text-center col-sm-6"> <a style="color:blue;" href="#" onclick="calanderdiv()"> View details</a> </div> <div class="col-sm-6 text-center"> <a style="color:blue;" href="#"> Want Preclose ? </a> </div> </div> </div> </div>
.maindiv{ border-radius:15px; } .sf-menu{ list-style:none; } #fh5co-menu-wrap { position: relative; z-index: 2; display: block; float: right; margin-top: 9px; } .sf-menu li, .sf-menu ul li, .sf-menu ul ul li, .sf-menu li:hover, .sf-menu li.sfHover { background: transparent; } .sf-menu li { background: #bdd2ff; white-space: nowrap; *white-space: normal; -webkit-transition: background .2s; transition: background .2s; } .sf-menu>li { float: left; } .sf-menu { float: right; } .sf-menu { margin: 7px 0 0 0!important; } .nav-header { position: relative; float: left; width: 100%; } .fh5co-nav-toggle { cursor: pointer; text-decoration: none; } .fh5co-nav-toggle { position: absolute; top: 0; right: 0; z-index: 9999; display: block; margin: 0 auto; display: none; cursor: pointer; } .tab-content { padding: 0px 0px !important; }
function calanderdiv(){ $('#calanderdiv').toggle(); $('#maindiv').removeClass('card-header'); }

Related: See More

BLK• Design System
arrow key navigation thumbnail gallery modal view
bootstrap 4 card
Card Styles

Questions / Comments: