"Bootstrap product list"
Bootstrap 3.3.0 Snippet by sudhirsuri

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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 ----------> <!DOCTYPE html> <html lang="en"> <head> <title>Home Page</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jqueEry.min.js"></script> --> <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap.min.js"></script> <link href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" /> <link rel="preconnect" href="https://fonts.gstatic.com"> <script> $("document").ready(function(){ $('#example').DataTable({ // columnDefs:[{targets:[1,2,3,4,5],visible:false}] }); $("#example_filter input").css({"width": "40vw"}); </script> <style> body { background-color: white; font-family: 'Montserrat', sans-serif; } #flex-container { display:flex; justify-content:space-between; align-items: center; box-shadow:0px 0px 5px grey; margin:5px; font-size:1.8rem; padding:1rem; } #example_filter input { border-radius: 5px; } #partone { display:flex; align-items: center; } #partone #details{ padding:1rem; } #details { line-height: 3rem; } #description { height:70px; overflow:scroll; overflow-x: hidden; } #partone img { border-radius:50%; display:inline; } #parttwo button { font-size: medium; } </style> </head> <body> <div class="container"> <h2>Home Page</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Post Request</button> <br> <br> <br> <div id="jobrequests"> <table id="example" class="table" style="width:100%"> <thead> <tr> <th>Date Posted</th> <th>Price</th> <th >Buyer Rating</th> </tr> </thead> <tbody> <tr> <td colspan="6"> <div class="card"> <div class="card-body"> <div id="flex-container"> <div id="partone"> <img src="https://miro.medium.com/max/2048/0*0fClPmIScV5pTLoE.jpg" width="100" height="100"/> <div id="details"> <strong>User 1</strong><br> <div id="description">I want a video to be edited I want a video to be edited I want a video to be edited I want a video to be edited I want a video to be edited I want a video to be edited </div> </div> </div> <div id="parttwo"> <button class="btn btn-danger">30$</button> </div> </div> </div> </div> </td> <td style="display:none;">123</td> <td style="display:none;">123</td> </tr> </tbody> </table> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Request Details</h4> </div> <div class="modal-body"> <form > <div class="form-group"> <label class="control-label">Category</label> <select class="form-control" id="category"> <option value="a">Abc</option> <option value="b">Abc</option> <option value="c">Abc</option> <option value="d">Abc</option> </select> </div> <div class="form-group"> <label class="control-label">Job Description</label> <textarea class="form-control" maxlength="400" id="jobdesc" rows="3" required></textarea> </div> <div class="form-group"> <label class="control-label">Amount</label> <input pattern="\d*" maxlength="6" type="text" id="amount" class="form-control" required/> </div> <br> <div id="response"></div> <center> <input type="submit" id="postjobbtn" class="btn btn-info" value="Post Job" /></center> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" id="closebtn" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html>

Related: See More

Rotating CSS Card
Bootstrap 4 and CCS3 Product Cards with Transition
eCommerce Product Detail
Product Detail Page - Ecommerce

Questions / Comments: