" Bootstrap 4 list grid view template"
Bootstrap 4.1.1 Snippet by tieusuquay79

<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 ----------> <div class="container mt-5"> <div class="row"> <div class="col-md-4"> <div class="card p-3"> <div class="d-flex flex-row mb-3"><img src="https://i.imgur.com/ccMhxvC.png" width="70"> <div class="d-flex flex-column ml-2"><span>Stripe</span><span class="text-black-50">Payment Services</span><span class="ratings"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></span></div> </div> <h6>Get more context on your users with stripe data inside our platform.</h6> <div class="d-flex justify-content-between install mt-3"><span>Installed 172 times</span><span class="text-primary">View <i class="fa fa-angle-right"></i></span></div> </div> </div> <div class="col-md-4"> <div class="card p-3"> <div class="d-flex flex-row mb-3"><img src="https://i.imgur.com/IpKQiNu.png" width="70"> <div class="d-flex flex-column ml-2"><span>Mailchimp</span><span class="text-black-50">Project Management</span><span class="ratings"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></span></div> </div> <h6>Capture and sync subscribers from your mailchimp platform to ours with ease.</h6> <div class="d-flex justify-content-between install mt-3"><span>Installed 1234 times</span><span class="text-primary">View <i class="fa fa-angle-right"></i></span></div> </div> </div> <div class="col-md-4"> <div class="card p-3"> <div class="d-flex flex-row mb-3"><img src="https://i.imgur.com/42SqVZd.png" width="70"> <div class="d-flex flex-column ml-2"><span>Dropbox</span><span class="text-black-50">File Management</span><span class="ratings"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></span></div> </div> <h6>Use dropbox to sync your photos to our platform and share it with others.</h6> <div class="d-flex justify-content-between install mt-3"><span>Installed 1234 times</span><span class="text-primary">View <i class="fa fa-angle-right"></i></span></div> </div> </div> <div class="col-md-4"> <div class="card p-3"> <div class="d-flex flex-row mb-3"><img src="https://i.imgur.com/lXEUCY8.png" width="70"> <div class="d-flex flex-column ml-2"><span>Shopify</span><span class="text-black-50">Ecommerce</span><span class="ratings"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></span></div> </div> <h6>Sell you items with ease with having any website with our free platform</h6> <div class="d-flex justify-content-between install mt-3"><span>Installed 1234 times</span><span class="text-primary">View <i class="fa fa-angle-right"></i></span></div> </div> </div> <div class="col-md-4"> <div class="card p-3"> <div class="d-flex flex-row mb-3"><img src="https://i.imgur.com/S2In5pz.png" width="70"> <div class="d-flex flex-column ml-2"><span>Atlassian</span><span class="text-black-50">Project management</span><span class="ratings"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></span></div> </div> <h6>Developing products for developers,project managers and architects.</h6> <div class="d-flex justify-content-between install mt-3"><span>Installed 345 times</span><span class="text-primary">View <i class="fa fa-angle-right"></i></span></div> </div> </div> <div class="col-md-4"> <div class="card p-3"> <div class="d-flex flex-row mb-3"><img src="https://i.imgur.com/S5oK3Oe.png" width="70"> <div class="d-flex flex-column ml-2"><span>Salesforce</span><span class="text-black-50">Project management</span><span class="ratings"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></span></div> </div> <h6>Developing products for developers,project managers and architects.</h6> <div class="d-flex justify-content-between install mt-3"><span>Installed 345 times</span><span class="text-primary">View <i class="fa fa-angle-right"></i></span></div> </div> </div> </div> </div>
body { background: #eee } .ratings i { color: green } .install span { font-size: 12px } .col-md-4 { margin-top: 27px }

Related: See More


Questions / Comments: